vue3-auto-scale 1.0.4 → 1.0.6

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 (4) hide show
  1. package/dist/index.esm.js +107 -64
  2. package/dist/index.js +133 -1
  3. package/dist/index.umd.js +136 -1
  4. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1,90 +1,133 @@
1
- import { shallowRef as w, onMounted as _, onBeforeUnmount as h } from "vue";
2
- function A(t = {}) {
1
+ import { shallowRef, onMounted, onBeforeUnmount } from "vue";
2
+ function createAutoScale$1(options = {}) {
3
3
  const {
4
- designWidth: e = 1920,
5
- designHeight: o = 1080,
6
- mode: n = "contain",
7
- rootId: u = "app",
8
- delay: $ = 200,
9
- debug: y = !1
10
- } = t;
11
- let a = null, r = 1;
12
- const l = (...s) => {
13
- y && console.log("[vue3-auto-scale]", ...s);
14
- }, i = () => {
15
- const s = document.getElementById(u);
16
- if (!s) {
17
- l(`❌ 未找到 id 为 "${u}" 的容器`);
4
+ designWidth = 1920,
5
+ designHeight = 1080,
6
+ mode = "contain",
7
+ rootId = "app",
8
+ delay = 200,
9
+ debug = false
10
+ } = options;
11
+ let resizeTimer = null;
12
+ let currentScale = 1;
13
+ const log = (...args) => {
14
+ if (debug) {
15
+ console.log("[vue3-auto-scale]", ...args);
16
+ }
17
+ };
18
+ const update = () => {
19
+ const app = document.getElementById(rootId);
20
+ if (!app) {
21
+ log(`❌ 未找到 id 为 "${rootId}" 的容器`);
18
22
  return;
19
23
  }
20
- const f = window.innerWidth, m = window.innerHeight, v = f / e, g = m / o, c = n === "contain" ? Math.min(v, g) : Math.max(v, g);
21
- r = c, s.style.transform = `scale(${c})`, s.style.transformOrigin = "top left";
22
- const S = (f - e * c) / 2, p = (m - o * c) / 2;
23
- s.style.marginLeft = `${S}px`, s.style.marginTop = `${p}px`, l(`✅ 缩放比例: ${c.toFixed(4)}, 偏移: (${S.toFixed(0)}, ${p.toFixed(0)})`);
24
- }, d = () => {
25
- a && (clearTimeout(a), a = null), a = setTimeout(i, $);
26
- }, x = () => {
27
- i(), window.addEventListener("resize", d), window.addEventListener("orientationchange", () => {
28
- setTimeout(i, 300);
29
- }), l("🚀 自适应缩放已启动");
30
- }, I = () => {
31
- window.removeEventListener("resize", d), a && (clearTimeout(a), a = null), l("🛑 自适应缩放已销毁");
32
- }, T = () => r;
33
- return x(), {
34
- update: i,
35
- destroy: I,
36
- getScale: T
24
+ const winWidth = window.innerWidth;
25
+ const winHeight = window.innerHeight;
26
+ const scaleX = winWidth / designWidth;
27
+ const scaleY = winHeight / designHeight;
28
+ const scale = mode === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
29
+ currentScale = scale;
30
+ app.style.transform = `scale(${scale})`;
31
+ app.style.transformOrigin = "top left";
32
+ const offsetX = (winWidth - designWidth * scale) / 2;
33
+ const offsetY = (winHeight - designHeight * scale) / 2;
34
+ app.style.marginLeft = `${offsetX}px`;
35
+ app.style.marginTop = `${offsetY}px`;
36
+ log(`✅ 缩放比例: ${scale.toFixed(4)}, 偏移: (${offsetX.toFixed(0)}, ${offsetY.toFixed(0)})`);
37
+ };
38
+ const handleResize = () => {
39
+ if (resizeTimer) {
40
+ clearTimeout(resizeTimer);
41
+ resizeTimer = null;
42
+ }
43
+ resizeTimer = setTimeout(update, delay);
44
+ };
45
+ const start = () => {
46
+ update();
47
+ window.addEventListener("resize", handleResize);
48
+ window.addEventListener("orientationchange", () => {
49
+ setTimeout(update, 300);
50
+ });
51
+ log("🚀 自适应缩放已启动");
52
+ };
53
+ const destroy = () => {
54
+ window.removeEventListener("resize", handleResize);
55
+ if (resizeTimer) {
56
+ clearTimeout(resizeTimer);
57
+ resizeTimer = null;
58
+ }
59
+ log("🛑 自适应缩放已销毁");
60
+ };
61
+ const getScale = () => currentScale;
62
+ start();
63
+ return {
64
+ update,
65
+ destroy,
66
+ getScale
37
67
  };
38
68
  }
39
- function z(t = {}) {
40
- const e = w(null), o = w(1);
41
- return _(() => {
69
+ function useAutoScale$1(options = {}) {
70
+ const instance = shallowRef(null);
71
+ const scale = shallowRef(1);
72
+ onMounted(() => {
42
73
  requestAnimationFrame(() => {
43
- e.value = A({
44
- ...t,
45
- debug: t.debug ?? !1
74
+ instance.value = createAutoScale$1({
75
+ ...options,
76
+ debug: options.debug ?? false
46
77
  });
47
- const n = setInterval(() => {
48
- e.value && (o.value = e.value.getScale());
78
+ const pollScale = setInterval(() => {
79
+ if (instance.value) {
80
+ scale.value = instance.value.getScale();
81
+ }
49
82
  }, 500);
50
- h(() => {
51
- clearInterval(n);
83
+ onBeforeUnmount(() => {
84
+ clearInterval(pollScale);
52
85
  });
53
86
  });
54
- }), h(() => {
55
- e.value && (e.value.destroy(), e.value = null);
56
- }), {
87
+ });
88
+ onBeforeUnmount(() => {
89
+ if (instance.value) {
90
+ instance.value.destroy();
91
+ instance.value = null;
92
+ }
93
+ });
94
+ return {
57
95
  /** 当前缩放比例 */
58
- scale: o,
96
+ scale,
59
97
  /** 手动更新缩放 */
60
98
  update: () => {
61
- var n;
62
- return (n = e.value) == null ? void 0 : n.update();
99
+ var _a;
100
+ return (_a = instance.value) == null ? void 0 : _a.update();
63
101
  },
64
102
  /** 获取缩放实例（高级用法） */
65
- instance: e
103
+ instance
66
104
  };
67
105
  }
68
- const E = {
69
- mounted(t, e) {
70
- const o = e.value || {}, n = A({
71
- ...o,
72
- rootId: t.id || void 0
106
+ const vAutoScale$1 = {
107
+ mounted(el, binding) {
108
+ const options = binding.value || {};
109
+ const instance = createAutoScale$1({
110
+ ...options,
111
+ rootId: el.id || void 0
73
112
  });
74
- t.__autoScaleInstance = n;
113
+ el.__autoScaleInstance = instance;
75
114
  },
76
- beforeUnmount(t) {
77
- const e = t.__autoScaleInstance;
78
- e && (e.destroy(), delete t.__autoScaleInstance);
115
+ beforeUnmount(el) {
116
+ const instance = el.__autoScaleInstance;
117
+ if (instance) {
118
+ instance.destroy();
119
+ delete el.__autoScaleInstance;
120
+ }
79
121
  }
80
- }, F = {
122
+ };
123
+ const index = {
81
124
  useAutoScale,
82
125
  vAutoScale,
83
126
  createAutoScale
84
127
  };
85
128
  export {
86
- A as createAutoScale,
87
- F as default,
88
- z as useAutoScale,
89
- E as vAutoScale
129
+ createAutoScale$1 as createAutoScale,
130
+ index as default,
131
+ useAutoScale$1 as useAutoScale,
132
+ vAutoScale$1 as vAutoScale
90
133
  };
package/dist/index.js CHANGED
@@ -1 +1,133 @@
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;
1
+ "use strict";
2
+ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ const vue = require("vue");
4
+ function createAutoScale$1(options = {}) {
5
+ const {
6
+ designWidth = 1920,
7
+ designHeight = 1080,
8
+ mode = "contain",
9
+ rootId = "app",
10
+ delay = 200,
11
+ debug = false
12
+ } = options;
13
+ let resizeTimer = null;
14
+ let currentScale = 1;
15
+ const log = (...args) => {
16
+ if (debug) {
17
+ console.log("[vue3-auto-scale]", ...args);
18
+ }
19
+ };
20
+ const update = () => {
21
+ const app = document.getElementById(rootId);
22
+ if (!app) {
23
+ log(`❌ 未找到 id 为 "${rootId}" 的容器`);
24
+ return;
25
+ }
26
+ const winWidth = window.innerWidth;
27
+ const winHeight = window.innerHeight;
28
+ const scaleX = winWidth / designWidth;
29
+ const scaleY = winHeight / designHeight;
30
+ const scale = mode === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
31
+ currentScale = scale;
32
+ app.style.transform = `scale(${scale})`;
33
+ app.style.transformOrigin = "top left";
34
+ const offsetX = (winWidth - designWidth * scale) / 2;
35
+ const offsetY = (winHeight - designHeight * scale) / 2;
36
+ app.style.marginLeft = `${offsetX}px`;
37
+ app.style.marginTop = `${offsetY}px`;
38
+ log(`✅ 缩放比例: ${scale.toFixed(4)}, 偏移: (${offsetX.toFixed(0)}, ${offsetY.toFixed(0)})`);
39
+ };
40
+ const handleResize = () => {
41
+ if (resizeTimer) {
42
+ clearTimeout(resizeTimer);
43
+ resizeTimer = null;
44
+ }
45
+ resizeTimer = setTimeout(update, delay);
46
+ };
47
+ const start = () => {
48
+ update();
49
+ window.addEventListener("resize", handleResize);
50
+ window.addEventListener("orientationchange", () => {
51
+ setTimeout(update, 300);
52
+ });
53
+ log("🚀 自适应缩放已启动");
54
+ };
55
+ const destroy = () => {
56
+ window.removeEventListener("resize", handleResize);
57
+ if (resizeTimer) {
58
+ clearTimeout(resizeTimer);
59
+ resizeTimer = null;
60
+ }
61
+ log("🛑 自适应缩放已销毁");
62
+ };
63
+ const getScale = () => currentScale;
64
+ start();
65
+ return {
66
+ update,
67
+ destroy,
68
+ getScale
69
+ };
70
+ }
71
+ function useAutoScale$1(options = {}) {
72
+ const instance = vue.shallowRef(null);
73
+ const scale = vue.shallowRef(1);
74
+ vue.onMounted(() => {
75
+ requestAnimationFrame(() => {
76
+ instance.value = createAutoScale$1({
77
+ ...options,
78
+ debug: options.debug ?? false
79
+ });
80
+ const pollScale = setInterval(() => {
81
+ if (instance.value) {
82
+ scale.value = instance.value.getScale();
83
+ }
84
+ }, 500);
85
+ vue.onBeforeUnmount(() => {
86
+ clearInterval(pollScale);
87
+ });
88
+ });
89
+ });
90
+ vue.onBeforeUnmount(() => {
91
+ if (instance.value) {
92
+ instance.value.destroy();
93
+ instance.value = null;
94
+ }
95
+ });
96
+ return {
97
+ /** 当前缩放比例 */
98
+ scale,
99
+ /** 手动更新缩放 */
100
+ update: () => {
101
+ var _a;
102
+ return (_a = instance.value) == null ? void 0 : _a.update();
103
+ },
104
+ /** 获取缩放实例（高级用法） */
105
+ instance
106
+ };
107
+ }
108
+ const vAutoScale$1 = {
109
+ mounted(el, binding) {
110
+ const options = binding.value || {};
111
+ const instance = createAutoScale$1({
112
+ ...options,
113
+ rootId: el.id || void 0
114
+ });
115
+ el.__autoScaleInstance = instance;
116
+ },
117
+ beforeUnmount(el) {
118
+ const instance = el.__autoScaleInstance;
119
+ if (instance) {
120
+ instance.destroy();
121
+ delete el.__autoScaleInstance;
122
+ }
123
+ }
124
+ };
125
+ const index = {
126
+ useAutoScale,
127
+ vAutoScale,
128
+ createAutoScale
129
+ };
130
+ exports.createAutoScale = createAutoScale$1;
131
+ exports.default = index;
132
+ exports.useAutoScale = useAutoScale$1;
133
+ exports.vAutoScale = vAutoScale$1;
package/dist/index.umd.js CHANGED
@@ -1 +1,136 @@
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"}})});
1
+ (function(global, factory) {
2
+ typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.Vue3AutoScale = {}, global.Vue));
3
+ })(this, function(exports2, vue) {
4
+ "use strict";
5
+ function createAutoScale$1(options = {}) {
6
+ const {
7
+ designWidth = 1920,
8
+ designHeight = 1080,
9
+ mode = "contain",
10
+ rootId = "app",
11
+ delay = 200,
12
+ debug = false
13
+ } = options;
14
+ let resizeTimer = null;
15
+ let currentScale = 1;
16
+ const log = (...args) => {
17
+ if (debug) {
18
+ console.log("[vue3-auto-scale]", ...args);
19
+ }
20
+ };
21
+ const update = () => {
22
+ const app = document.getElementById(rootId);
23
+ if (!app) {
24
+ log(`❌ 未找到 id 为 "${rootId}" 的容器`);
25
+ return;
26
+ }
27
+ const winWidth = window.innerWidth;
28
+ const winHeight = window.innerHeight;
29
+ const scaleX = winWidth / designWidth;
30
+ const scaleY = winHeight / designHeight;
31
+ const scale = mode === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
32
+ currentScale = scale;
33
+ app.style.transform = `scale(${scale})`;
34
+ app.style.transformOrigin = "top left";
35
+ const offsetX = (winWidth - designWidth * scale) / 2;
36
+ const offsetY = (winHeight - designHeight * scale) / 2;
37
+ app.style.marginLeft = `${offsetX}px`;
38
+ app.style.marginTop = `${offsetY}px`;
39
+ log(`✅ 缩放比例: ${scale.toFixed(4)}, 偏移: (${offsetX.toFixed(0)}, ${offsetY.toFixed(0)})`);
40
+ };
41
+ const handleResize = () => {
42
+ if (resizeTimer) {
43
+ clearTimeout(resizeTimer);
44
+ resizeTimer = null;
45
+ }
46
+ resizeTimer = setTimeout(update, delay);
47
+ };
48
+ const start = () => {
49
+ update();
50
+ window.addEventListener("resize", handleResize);
51
+ window.addEventListener("orientationchange", () => {
52
+ setTimeout(update, 300);
53
+ });
54
+ log("🚀 自适应缩放已启动");
55
+ };
56
+ const destroy = () => {
57
+ window.removeEventListener("resize", handleResize);
58
+ if (resizeTimer) {
59
+ clearTimeout(resizeTimer);
60
+ resizeTimer = null;
61
+ }
62
+ log("🛑 自适应缩放已销毁");
63
+ };
64
+ const getScale = () => currentScale;
65
+ start();
66
+ return {
67
+ update,
68
+ destroy,
69
+ getScale
70
+ };
71
+ }
72
+ function useAutoScale$1(options = {}) {
73
+ const instance = vue.shallowRef(null);
74
+ const scale = vue.shallowRef(1);
75
+ vue.onMounted(() => {
76
+ requestAnimationFrame(() => {
77
+ instance.value = createAutoScale$1({
78
+ ...options,
79
+ debug: options.debug ?? false
80
+ });
81
+ const pollScale = setInterval(() => {
82
+ if (instance.value) {
83
+ scale.value = instance.value.getScale();
84
+ }
85
+ }, 500);
86
+ vue.onBeforeUnmount(() => {
87
+ clearInterval(pollScale);
88
+ });
89
+ });
90
+ });
91
+ vue.onBeforeUnmount(() => {
92
+ if (instance.value) {
93
+ instance.value.destroy();
94
+ instance.value = null;
95
+ }
96
+ });
97
+ return {
98
+ /** 当前缩放比例 */
99
+ scale,
100
+ /** 手动更新缩放 */
101
+ update: () => {
102
+ var _a;
103
+ return (_a = instance.value) == null ? void 0 : _a.update();
104
+ },
105
+ /** 获取缩放实例（高级用法） */
106
+ instance
107
+ };
108
+ }
109
+ const vAutoScale$1 = {
110
+ mounted(el, binding) {
111
+ const options = binding.value || {};
112
+ const instance = createAutoScale$1({
113
+ ...options,
114
+ rootId: el.id || void 0
115
+ });
116
+ el.__autoScaleInstance = instance;
117
+ },
118
+ beforeUnmount(el) {
119
+ const instance = el.__autoScaleInstance;
120
+ if (instance) {
121
+ instance.destroy();
122
+ delete el.__autoScaleInstance;
123
+ }
124
+ }
125
+ };
126
+ const index = {
127
+ useAutoScale,
128
+ vAutoScale,
129
+ createAutoScale
130
+ };
131
+ exports2.createAutoScale = createAutoScale$1;
132
+ exports2.default = index;
133
+ exports2.useAutoScale = useAutoScale$1;
134
+ exports2.vAutoScale = vAutoScale$1;
135
+ Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
136
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue3-auto-scale",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "Vue 3 大屏自适应缩放工具，基于 transform: scale 实现像素级还原",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",