{"versions":{"1.0.0":{"name":"adaptorjs","version":"1.0.0","description":"adaptorjs 是一款自适应的大屏工具，适用于 react/vue 等框架","main":"dist/index.js","types":"dist/index.d.ts","keywords":["可视化","可视化大屏","自适应","大屏","bigscreen","scale-screen","auto-zoom","auto","scale","adaptor"],"repository":{"type":"git","url":"git+https://github.com/astak16/adaptorjs.git"},"author":{"name":"柚子uccs"},"license":"MIT","devDependencies":{"@babel/core":"^7.22.1","@babel/plugin-transform-runtime":"^7.22.4","@babel/preset-env":"^7.22.4","@babel/preset-typescript":"^7.21.5","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^25.0.0","rollup":"^3.23.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.34.1","typescript":"^5.0.4"},"scripts":{"build":"rollup --bundleConfigAsCjs --config rollup.config.js","test":"echo \"Error: no test specified\" && exit 1"},"bugs":{"url":"https://github.com/astak16/adaptorjs/issues"},"homepage":"https://github.com/astak16/adaptorjs#readme","_id":"adaptorjs@1.0.0","_integrity":"sha512-y5sCJvBlKFRCxr3npuzAawiSRvwpB2NMtqlviGsOeAYYl4fQaY6e3hcc4qC+HtHc2SXh8s8uS4j/VP5/s1R/Ng==","_resolved":"/private/var/folders/6v/wr_r1xzx67z0480f7q5s3nf00000gn/T/7b898f09dbe626cc7a5da29a8ab7be28/adaptorjs-1.0.0.tgz","_from":"file:adaptorjs-1.0.0.tgz","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-y5sCJvBlKFRCxr3npuzAawiSRvwpB2NMtqlviGsOeAYYl4fQaY6e3hcc4qC+HtHc2SXh8s8uS4j/VP5/s1R/Ng==","shasum":"c92f1320dc1c74a16272e533f4751780dd90446e","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/adaptorjs/-/adaptorjs-1.0.0.tgz","fileCount":5,"unpackedSize":6939,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1QoBWTBYQJwnBQZmR9TdiIy9vmDq8rNqhpXoomE/2gAiAMupGJJBYhRNXYfWVfuOtglyYLlk2XjU9AZNbkJ/zgUg=="}],"size":3510},"_npmUser":{"name":"anonymous","email":"1500846601@qq.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"1500846601@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/adaptorjs_1.0.0_1685502607800_0.1551032264545502"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-05-31T03:10:07.965Z","publish_time":1685502607965,"_source_registry_name":"default","contributors":[]},"1.0.1":{"name":"adaptorjs","version":"1.0.1","description":"adaptorjs 是一款自适应的大屏工具，适用于 react/vue 等框架","main":"dist/index.js","types":"dist/index.d.ts","keywords":["可视化","可视化大屏","自适应","大屏","bigscreen","scale-screen","auto-zoom","auto","scale","adaptor"],"repository":{"type":"git","url":"git+https://github.com/astak16/adaptorjs.git"},"author":{"name":"柚子uccs"},"license":"MIT","devDependencies":{"@antv/l7":"^2.15.5","@babel/core":"^7.22.1","@babel/plugin-transform-runtime":"^7.22.4","@babel/preset-env":"^7.22.4","@babel/preset-typescript":"^7.21.5","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^25.0.0","@types/lodash":"^4.14.191","@types/qs":"^6.9.7","@types/react":"^18.0.27","@types/react-dom":"^18.0.10","@types/react-router-dom":"^5.3.3","@types/styled-components":"^5.1.26","@types/tinycolor2":"^1.4.3","@vitejs/plugin-react-swc":"^3.0.0","react":"^18.2.0","react-dom":"^18.2.0","react-is":"^18.2.0","react-router-dom":"^6.11.2","rollup":"^3.23.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-typescript2":"^0.34.1","typescript":"^5.0.4","vite":"^4.1.0","antd":"^5.5.2","dayjs":"^1.11.7","echarts":"^5.4.2","echarts-for-react":"^3.0.2","styled-components":"^5.3.11"},"scripts":{"dev":"vite","build":"rollup --bundleConfigAsCjs --config rollup.config.js"},"bugs":{"url":"https://github.com/astak16/adaptorjs/issues"},"homepage":"https://github.com/astak16/adaptorjs#readme","_id":"adaptorjs@1.0.1","_integrity":"sha512-apXYLW9ZZWE3Ca3nPkApYLnM2uRMWCq5MSkYEOBdhTWCd9Sg6DoxPY+3VYz+fkTYKhAhCnm1kGqaPHZxYYBaQA==","_resolved":"/private/var/folders/6v/wr_r1xzx67z0480f7q5s3nf00000gn/T/6514d712d1543af6a0fb6106a93f3d65/adaptorjs-1.0.1.tgz","_from":"file:adaptorjs-1.0.1.tgz","_nodeVersion":"18.14.0","_npmVersion":"9.3.1","dist":{"integrity":"sha512-apXYLW9ZZWE3Ca3nPkApYLnM2uRMWCq5MSkYEOBdhTWCd9Sg6DoxPY+3VYz+fkTYKhAhCnm1kGqaPHZxYYBaQA==","shasum":"ad321683797afdb3ce23ba72db0d053bf5eb6fa3","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/adaptorjs/-/adaptorjs-1.0.1.tgz","fileCount":5,"unpackedSize":7966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbd1lDmNwRhJfiimRwpi1J09gwSt/g6ryKliDqqxT92AiEAzD9pkf2tIHxloWs+vVhdmpCzs36fa403zVktlbHXzwE="}],"size":3849},"_npmUser":{"name":"anonymous","email":"1500846601@qq.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"1500846601@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/adaptorjs_1.0.1_1685763642159_0.33142284414842793"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-06-03T03:40:42.327Z","publish_time":1685763642327,"_source_registry_name":"default","contributors":[]}},"dist-tags":{"latest":"1.0.1"},"name":"adaptorjs","time":{"created":"2023-05-31T04:16:32.357Z","modified":"2023-06-05T12:58:57.871Z","1.0.0":"2023-05-31T03:10:07.965Z","1.0.1":"2023-06-03T03:40:42.327Z"},"readme":"## 主要解决的问题\n\n大屏适配主要是解决屏幕尺寸比和设计稿尺寸比不一致的问题，采用的方法是：`scale`\n\n虽然这种方案并不完美，但也是目前比较好的解决方案\n\n比如在 pc 上就不是特别完美，特别是老型号 windows 机器，分辨率各种各样\n\n但在大屏上看就会很完美，因为大屏的分辨率一般都是 `16:9` 的，而设计稿一般都是 `1920*1080`\n\n然后在使用 `scale` 缩放时，主要有 3 个问题\n\n1. 地图上的点位会出现偏移/点击位置不准\n2. 使用到 `overflow: scroll` 的地方，文本可能会出现模糊\n3. 在使用第三方组件时，比如下拉框等不会缩放\n\n开发这个组件就是为了解决这 3 个问题\n\n## 使用\n\n1. 安装\n\n```bash\nnpm i adaptorjs\n# 或\nyarn add adaptorjs\n# 或\npnpm i adaptorjs\n```\n\n2. 引入\n\n```ts\nimport Adaptor from \"adaptorjs\";\n```\n\n3. 快速使用\n\n```ts\nconst adaptor = new Adaptor({\n  designHeight: 1080,\n  designWidth: 1920,\n  querySelector: \"#app\",\n  extraSelectors: [\".xxx\"],\n});\n```\n\n### 注意事项\n\n要在 `dom` 加载完成后再初始化\n\n1. `react` 中使用\n\n```ts\nuseEffect(() => {\n  const adaptor = new Adaptor({\n    designHeight: 1080,\n    designWidth: 1920,\n    querySelector: \"#app\",\n    extraSelectors: [\".xxx\"],\n  });\n  return () => {\n    adaptor.destroy();\n  };\n}, []);\n```\n\n2. `vue` 中使用\n\n```ts\nlet adaptor;\nonMounted(() => {\n  adaptor = new Adaptor({\n    designHeight: 1080,\n    designWidth: 1920,\n    querySelector: \"#app\",\n    extraSelectors: [\".xxx\"],\n  });\n});\n\nonUnmounted(() => {\n  adaptor.destroy();\n});\n```\n\n3. 参数说明\n\n```ts\nquerySelector: string // 大屏根选择器，必选\nextraQuerySelectors?: string[]; // 需要额外缩放的 dom 选择器，可选\ndesignWidth?: number; // 设计稿宽度，可选，默认 1920\ndesignHeight?: number; // 设计稿高度，可选，默认 1080\ntype?: ScaleType; // 缩放类型，可选，默认 scale\n```\n\n### 最终实现效果\n\n![Jietu20230530-200728-HD.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9555be058447421da9588463b1aef2e4~tplv-k3u1fbpfcp-watermark.image?)\n\n## demo\n\n```bash\ngit clone https://github.com/astak16/adaptorjs.git\n\ncd adaptorjs\n\npnpm i\n\npnpm dev\n```","users":{}}