npm - vue3-auto-scale - Versions diffs - 1.0.0 - Mend

vue3-auto-scale 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,18 @@
+# vue3-auto-scale
+Vue 3 大屏自适应缩放工具，基于 `transform: scale` 实现像素级还原。
+## 特性
+- 🎯 **像素级还原**：完全按照 UI 设计稿尺寸开发
+- 📱 **自适应**：自动适配任意分辨率屏幕
+- 🚀 **零配置**：一行代码即可启用
+- 📦 **轻量**：无第三方依赖，gzip 后 < 1KB
+- 🔧 **灵活**：支持自定义设计稿尺寸、缩放模式
+## 安装
+```bash
+npm install vue3-auto-scale
+# 或
+yarn add vue3-auto-scale

package/dist/index.cjs.js ADDED Viewed

@@ -0,0 +1 @@

+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("vue");function r(t={}){const{designWidth:e=1920,designHeight:o=1080,mode:n="contain",rootId:d="app",delay:y=200,debug:A=!1}=t;let a=null,f=1;const i=(...s)=>{A&&console.log("[vue3-auto-scale]",...s)},u=()=>{const s=document.getElementById(d);if(!s){i(`❌ 未找到 id 为 "${d}" 的容器`);return}const m=window.innerWidth,g=window.innerHeight,S=m/e,w=g/o,l=n==="contain"?Math.min(S,w):Math.max(S,w);f=l,s.style.transform=`scale(${l})`,s.style.transformOrigin="top left";const p=(m-e*l)/2,h=(g-o*l)/2;s.style.marginLeft=`${p}px`,s.style.marginTop=`${h}px`,i(`✅ 缩放比例: ${l.toFixed(4)}, 偏移: (${p.toFixed(0)}, ${h.toFixed(0)})`)},v=()=>{a&&(clearTimeout(a),a=null),a=setTimeout(u,y)},$=()=>{u(),window.addEventListener("resize",v),window.addEventListener("orientationchange",()=>{setTimeout(u,300)}),i("🚀 自适应缩放已启动")},I=()=>{window.removeEventListener("resize",v),a&&(clearTimeout(a),a=null),i("🛑 自适应缩放已销毁")},_=()=>f;return $(),{update:u,destroy:I,getScale:_}}function x(t={}){const e=c.shallowRef(null),o=c.shallowRef(1);return c.onMounted(()=>{requestAnimationFrame(()=>{e.value=r({...t,debug:t.debug??!1});const n=setInterval(()=>{e.value&&(o.value=e.value.getScale())},500);c.onBeforeUnmount(()=>{clearInterval(n)})})}),c.onBeforeUnmount(()=>{e.value&&(e.value.destroy(),e.value=null)}),{scale:o,update:()=>{var n;return(n=e.value)==null?void 0:n.update()},instance:e}}const T={mounted(t,e){const o=e.value||{},n=r({...o,rootId:t.id||void 0});t.__autoScaleInstance=n},beforeUnmount(t){const e=t.__autoScaleInstance;e&&(e.destroy(),delete t.__autoScaleInstance)}},b={useAutoScale,vAutoScale,createAutoScale};exports.createAutoScale=r;exports.default=b;exports.useAutoScale=x;exports.vAutoScale=T;

package/dist/index.es.js ADDED Viewed

@@ -0,0 +1,90 @@
+import { shallowRef as w, onMounted as _, onBeforeUnmount as h } from "vue";
+function A(t = {}) {
+  const {
+    designWidth: e = 1920,
+    designHeight: o = 1080,
+    mode: n = "contain",
+    rootId: u = "app",
+    delay: $ = 200,
+    debug: y = !1
+  } = t;
+  let a = null, r = 1;
+  const l = (...s) => {
+    y && console.log("[vue3-auto-scale]", ...s);
+  }, i = () => {
+    const s = document.getElementById(u);
+    if (!s) {
+      l(`❌ 未找到 id 为 "${u}" 的容器`);
+      return;
+    }
+    const f = window.innerWidth, m = window.innerHeight, v = f / e, g = m / o, c = n === "contain" ? Math.min(v, g) : Math.max(v, g);
+    r = c, s.style.transform = `scale(${c})`, s.style.transformOrigin = "top left";
+    const S = (f - e * c) / 2, p = (m - o * c) / 2;
+    s.style.marginLeft = `${S}px`, s.style.marginTop = `${p}px`, l(`✅ 缩放比例: ${c.toFixed(4)}, 偏移: (${S.toFixed(0)}, ${p.toFixed(0)})`);
+  }, d = () => {
+    a && (clearTimeout(a), a = null), a = setTimeout(i, $);
+  }, x = () => {
+    i(), window.addEventListener("resize", d), window.addEventListener("orientationchange", () => {
+      setTimeout(i, 300);
+    }), l("🚀 自适应缩放已启动");
+  }, I = () => {
+    window.removeEventListener("resize", d), a && (clearTimeout(a), a = null), l("🛑 自适应缩放已销毁");
+  }, T = () => r;
+  return x(), {
+    update: i,
+    destroy: I,
+    getScale: T
+  };
+}
+function z(t = {}) {
+  const e = w(null), o = w(1);
+  return _(() => {
+    requestAnimationFrame(() => {
+      e.value = A({
+        ...t,
+        debug: t.debug ?? !1
+      });
+      const n = setInterval(() => {
+        e.value && (o.value = e.value.getScale());
+      }, 500);
+      h(() => {
+        clearInterval(n);
+      });
+    });
+  }), h(() => {
+    e.value && (e.value.destroy(), e.value = null);
+  }), {
+    /** 当前缩放比例 */
+    scale: o,
+    /** 手动更新缩放 */
+    update: () => {
+      var n;
+      return (n = e.value) == null ? void 0 : n.update();
+    },
+    /** 获取缩放实例（高级用法） */
+    instance: e
+  };
+}
+const E = {
+  mounted(t, e) {
+    const o = e.value || {}, n = A({
+      ...o,
+      rootId: t.id || void 0
+    });
+    t.__autoScaleInstance = n;
+  },
+  beforeUnmount(t) {
+    const e = t.__autoScaleInstance;
+    e && (e.destroy(), delete t.__autoScaleInstance);
+  }
+}, F = {
+  useAutoScale,
+  vAutoScale,
+  createAutoScale
+};
+export {
+  A as createAutoScale,
+  F as default,
+  z as useAutoScale,
+  E as vAutoScale
+};

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,34 @@
+{
+  "name": "vue3-auto-scale",
+  "version": "1.0.0",
+  "description": "Vue 3 大屏自适应缩放工具，基于 transform: scale 实现像素级还原",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  },
+  "keywords": [
+    "vue3",
+    "autoscale",
+    "大屏",
+    "自适应",
+    "scale",
+    "数据可视化"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.0.0"
+  }
+}