vue3-auto-scale 1.0.2 → 1.0.3

package/dist/index.esm.js

@@ -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.js

@@ -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.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-auto-scale",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Vue 3 大屏自适应缩放工具，基于 transform: scale 实现像素级还原",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",