{"_id":"@double_ming/screen-fit-vue","_rev":"3-56327b7173fda6d699efe820d3a5599f","name":"@double_ming/screen-fit-vue","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@double_ming/screen-fit-vue","version":"1.0.0","description":"支持等比缩放、宽度占满、高度占满、宽或高等比缩放，满足最大占满容器、宽高填充整个容器不进行等比缩放等数字大屏适配 vue组件","main":"index.js","module":"dist/screen-fit-vue.esm-bundler.js","types":"dist/screen-fit-vue.d.ts","keywords":["screen","big screen","auto fit","vue component","screen vue"],"peerDependencies":{"vue":"^3.4.21"},"publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/screen-fit-vue.d.ts","node":{"production":"./dist/screen-fit-vue.cjs.js","development":"./dist/screen-fit-vue.cjs.js","default":"./index.js"},"module":"./dist/screen-fit-vue.esm-bundler.js","import":"./dist/screen-fit-vue.esm-bundler.js","require":"./index.js"},"./*":"./*"},"author":{"name":"doubleming"},"license":"ISC","buildOptions":{"name":"DMScreenFitVue","formats":["esm-bundler","cjs","global"]},"_id":"@double_ming/screen-fit-vue@1.0.0","gitHead":"ac8390f0ad7b1e73004ad60a35558476fb8e2274","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-g8MGwCtVhnEnKGZZcO50Hx45fioHQWT82hbH78V11tPhWJvIt3CfMlLnTwcPodGuF0EF+yzTzHyFZ7Lx89hBrg==","shasum":"2b285812aa14123b3e729891fb4c9a87194731f7","tarball":"https://registry.npmjs.org/@double_ming/screen-fit-vue/-/screen-fit-vue-1.0.0.tgz","fileCount":7,"unpackedSize":31639,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEb6caUt48i5pSGCP+3NNA97bZ093SjaLd2gAEUSQwrfAiBBGLq1DHsQBMRReCWVSwaVfsZDKU3qX+N+puEYr50aoQ=="}]},"_npmUser":{"name":"double_ming","email":"double_ming@outlook.com"},"directories":{},"maintainers":[{"name":"double_ming","email":"double_ming@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/screen-fit-vue_1.0.0_1711355994702_0.19568113977436763"},"_hasShrinkwrap":false},"1.0.2":{"name":"@double_ming/screen-fit-vue","version":"1.0.2","description":"支持等比缩放、宽度占满、高度占满、宽或高等比缩放，满足最大占满容器、宽高填充整个容器不进行等比缩放等数字大屏适配 vue组件","main":"index.js","module":"dist/screen-fit-vue.esm-bundler.js","types":"dist/screen-fit-vue.d.ts","keywords":["screen","big screen","auto fit","vue component","screen vue"],"peerDependencies":{"vue":"^3.4.21"},"publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/screen-fit-vue.d.ts","node":{"production":"./dist/screen-fit-vue.cjs.js","development":"./dist/screen-fit-vue.cjs.js","default":"./index.js"},"module":"./dist/screen-fit-vue.esm-bundler.js","import":"./dist/screen-fit-vue.esm-bundler.js","require":"./index.js"},"./*":"./*"},"author":{"name":"doubleming"},"license":"ISC","buildOptions":{"name":"DMScreenFitVue","formats":["esm-bundler","cjs","global"]},"_id":"@double_ming/screen-fit-vue@1.0.2","gitHead":"346f3cd2b5131a0311af2362850fbfc491889484","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-IGtMkdGSZWWvbaoxk/nGjKYUJh2E5Q/zzN+roynhWzivI12yYcdHXWAY41cBOxs7X9nLtHHkJ7ZgT6jiJeXRyg==","shasum":"d32403b932591414b2117f92e75fbb0f451203b0","tarball":"https://registry.npmjs.org/@double_ming/screen-fit-vue/-/screen-fit-vue-1.0.2.tgz","fileCount":7,"unpackedSize":31672,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwwjGy+aZlKCcK8PIjqKNcVPYwI4CEXGY4gzfK/AhmuwIhANEfpKBv/Cr0qdFEwxHkBfzlFRkM7UG63dHihUI4Uiop"}]},"_npmUser":{"name":"double_ming","email":"double_ming@outlook.com"},"directories":{},"maintainers":[{"name":"double_ming","email":"double_ming@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/screen-fit-vue_1.0.2_1712718869884_0.4323921795395893"},"_hasShrinkwrap":false},"1.0.3":{"name":"@double_ming/screen-fit-vue","version":"1.0.3","description":"支持等比缩放、宽度占满、高度占满、宽或高等比缩放，满足最大占满容器、宽高填充整个容器不进行等比缩放等数字大屏适配 vue组件","main":"index.js","module":"dist/screen-fit-vue.esm-bundler.js","types":"dist/screen-fit-vue.d.ts","keywords":["screen","big screen","auto fit","vue component","screen vue"],"peerDependencies":{"vue":"^3.4.21"},"publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/screen-fit-vue.d.ts","node":{"production":"./dist/screen-fit-vue.cjs.js","development":"./dist/screen-fit-vue.cjs.js","default":"./index.js"},"module":"./dist/screen-fit-vue.esm-bundler.js","import":"./dist/screen-fit-vue.esm-bundler.js","require":"./index.js"},"./*":"./*"},"author":{"name":"doubleming"},"license":"ISC","buildOptions":{"name":"DMScreenFitVue","formats":["esm-bundler","cjs","global"]},"_id":"@double_ming/screen-fit-vue@1.0.3","gitHead":"346f3cd2b5131a0311af2362850fbfc491889484","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-J6zKFWgPf1jtPKvpHZZYBB4jvCjM73K2ZlcBG/mLrNptQWjD9A+ieWizcBKMWKZ3QhrlAkZ2FqTdX1KWBwjiBw==","shasum":"c12a355b0da0466702d3be0090ad150dbee56e1e","tarball":"https://registry.npmjs.org/@double_ming/screen-fit-vue/-/screen-fit-vue-1.0.3.tgz","fileCount":8,"unpackedSize":7003165,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBITLz+uz0orx5vLirQ/uIW4gtTSz/Yg0Zf6MYMnw6ceAiAQ5o9xaDYOoLwvY/3rvmtSnoc5jYRALGr5jZ3oBtCAAQ=="}]},"_npmUser":{"name":"double_ming","email":"double_ming@outlook.com"},"directories":{},"maintainers":[{"name":"double_ming","email":"double_ming@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/screen-fit-vue_1.0.3_1712719393052_0.7141549874443431"},"_hasShrinkwrap":false},"1.0.4":{"name":"@double_ming/screen-fit-vue","version":"1.0.4","description":"支持等比缩放、宽度占满、高度占满、宽或高等比缩放，满足最大占满容器、宽高填充整个容器不进行等比缩放等数字大屏适配 vue组件","main":"index.js","module":"dist/screen-fit-vue.esm-bundler.js","types":"dist/screen-fit-vue.d.ts","keywords":["screen","big screen","auto fit","vue component","screen vue"],"peerDependencies":{"vue":"^3.4.21"},"exports":{".":{"types":"./dist/screen-fit-vue.d.ts","node":{"production":"./dist/screen-fit-vue.cjs.js","development":"./dist/screen-fit-vue.cjs.js","default":"./index.js"},"module":"./dist/screen-fit-vue.esm-bundler.js","import":"./dist/screen-fit-vue.esm-bundler.js","require":"./index.js"},"./*":"./*"},"author":{"name":"doubleming"},"homepage":"https://doubleming.github.io/screen-fit/","repository":{"type":"git","url":"git+https://github.com/doubleming/screen-fit.git"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/doubleming/screen-fit/issues"},"license":"ISC","buildOptions":{"name":"DMScreenFitVue","formats":["esm-bundler","cjs","global"]},"_id":"@double_ming/screen-fit-vue@1.0.4","gitHead":"346f3cd2b5131a0311af2362850fbfc491889484","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-7iqQAGrD7lnr/nQ/hdPT4ajuvZ1/gEAI5W0tCbPAMZ0xTG2iCmB3qG9ht5YRVOQse7dBKgh49rofFMwXTqmxmQ==","shasum":"71b51f912b2981e800fcef2b71af9140ddc131d9","tarball":"https://registry.npmjs.org/@double_ming/screen-fit-vue/-/screen-fit-vue-1.0.4.tgz","fileCount":7,"unpackedSize":31912,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGqlt1MWfAWEfkqxJZ/bt6w8m2cpkqFlz/heLJbddmfAiBUgIwRv4Shxq6Mf0MKrB6hIP5ZDSC3rqWQxpovYmgPUw=="}]},"_npmUser":{"name":"double_ming","email":"double_ming@outlook.com"},"directories":{},"maintainers":[{"name":"double_ming","email":"double_ming@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/screen-fit-vue_1.0.4_1712732178474_0.6529721725924291"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-25T08:39:54.597Z","1.0.0":"2024-03-25T08:39:54.846Z","modified":"2024-04-10T06:56:18.809Z","1.0.2":"2024-04-10T03:14:30.036Z","1.0.3":"2024-04-10T03:23:13.358Z","1.0.4":"2024-04-10T06:56:18.646Z"},"maintainers":[{"name":"double_ming","email":"double_ming@outlook.com"}],"description":"支持等比缩放、宽度占满、高度占满、宽或高等比缩放，满足最大占满容器、宽高填充整个容器不进行等比缩放等数字大屏适配 vue组件","keywords":["screen","big screen","auto fit","vue component","screen vue"],"author":{"name":"doubleming"},"license":"ISC","readme":" <h2 style=\"text-align: center;\"> 大屏只适应适配 </h2>\n\n![screen-fit](./screen-fit.gif)\n\n## 安装\n```sh\n# npm \nnpm install @double_ming/screen-fit-vue\n# yarn \nyarn add @double_ming/screen-fit-vue\n# pnpm\npnpm add @double_ming/screen-fit-vue\n```\n## demo\n[预览效果](https://doubleming.github.io/screen-fit/)\n\n## 使用\n```vue\n<script setup lang=\"ts\" name=\"VueComponent\">\nimport ScreenFit from '@double_ming/screen-fit-vue';\nimport bg from '../assets/1.jpg'\nimport { EFillType } from '@double_ming/screen-fit';\nimport { onMounted, ref, watch, reactive } from 'vue';\n\nconst fitType = ref<EFillType>(EFillType.contain)\nfunction action(type: EFillType) {\n  fitType.value = type\n}\n</script>\n\n<template>\n  <div>\n      <ScreenFit :design-height=\"1080\" :design-width=\"1920\" :fit-type=\"fitType\" style=\"height: 100vh\">\n        <div :style=\"{ backgroundImage: `url(${bg})`, width: '1800px', height: '1000px', objectFit: 'cover' }\"></div>\n      </ScreenFit>\n    <div class=\"action\">\n      <span class=\"action-text\">适配模式：</span>\n      <button id=\"cover\" @click=\"action(EFillType.cover)\">cover</button>\n      <button id=\"widthFit\" @click=\"action(EFillType.widthFit)\">widthFit</button>\n      <button id=\"heightFit\" @click=\"action(EFillType.heightFit)\">heightFit</button>\n      <button id=\"contain\" @click=\"action(EFillType.contain)\">contain</button>\n      <button id=\"fill\" @click=\"action(EFillType.fill)\">fill</button>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.action {\n  position: fixed;\n  z-index: 99999999;\n  left: 0;\n  top: 0;\n  background-color: #1a1a1a;\n\n  &-text {\n    padding: 0.6em 1.2em;\n  }\n\n  &-info {\n    padding: 0.6em 1.2em;\n    text-align: left;\n    font-size: 20px;\n    color: red;\n  }\n\n  button {\n    width: 100px;\n  }\n}\n</style>\n\n```\n## 适配方式\n> 提供了5中适配方式，分别为`EFillType`枚举中的`cover`、`widthFit`、`heightFit`、`contain`、`fill`、\n- `cover` 等比缩放，占满整个容器\n- `widthFit` 宽度占满容器，高等比缩放\n- `heightFit` 高度占满容器，宽等比缩放\n- `contain` 宽或高等比缩放，满足最大占满容器 默认\n- `fill` 宽和高填充整个容器，不进行等比缩放\n\n\n## 本项目是对screen-fit的vue封装，props支持screen-fit所有的配置\n## props配置参数\n| 属性 | 描述   | 类型   | 默认值  | \n| --- | --- | --- | --- |\n| designWidth | 设计稿宽  | number   | 1920 |\n| designHeight | 设计稿高  | number   | 1080 |\n| fitType | 适配方式 | EFillType   | contain |","readmeFilename":"README.md","homepage":"https://doubleming.github.io/screen-fit/","repository":{"type":"git","url":"git+https://github.com/doubleming/screen-fit.git"},"bugs":{"url":"https://github.com/doubleming/screen-fit/issues"}}