vue-auto-scale/dist/VueAutoScale.umd.js

vue大屏缩放组件

(function(a,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(a=typeof globalThis<"u"?globalThis:a||self,r(a.VueAutoScale={},a.Vue))})(this,(function(a,r){"use strict";function T(h,u){let i=null;return function(){i&&clearTimeout(i);const m=typeof u=="function"?u():u;i=setTimeout(()=>{i=null,h.call(this)},m)}}const b={width:1920,height:1080,scaleType:1,delay:100,reverseScalingIds:null,parent:!1},$="absolute",S=r.defineComponent({name:"VueAutoScale",__name:"index",props:r.mergeDefaults({width:{},height:{},scaleType:{},delay:{},reverseScalingIds:{},parent:{type:Boolean}},b),emits:["change"],setup(h,{emit:u}){const i=r.ref(null),e=h,m=u,x=r.ref(""),f=r.ref(""),g=r.ref(""),P=r.computed(()=>{const t=Number.isFinite(e.width)?`${e.width}px`:`${e.width}`,s=Number.isFinite(e.height)?`${e.height}px`:`${e.height}`;return{position:$,transformOrigin:"0px 0px",left:f.value,transform:x.value,width:t,height:s,top:g.value}});function B(){var l;const t=e.width,s=e.height;if(t<=0||s<=0)return[1,1];let n=window.innerWidth,o=window.innerHeight;if(e.parent&&((l=i.value)!=null&&l.parentElement)){const{width:c,height:d}=i.value.parentElement.getBoundingClientRect();n=c,o=d}if(n<=0||o<=0)return[1,1];if(e.scaleType===1)return[`${n/t},${o/s}`,`${t/n},${s/o}`];if(e.scaleType===2){const c=o/s,d=s/o,p=n/t,z=t/n;return p<c?[p,z]:[c,d]}return e.scaleType===3?[n/t,t/n]:e.scaleType===4?[o/s,s/o]:[1,1]}function R(t,s){if(!e.reverseScalingIds)return;let n=[];typeof e.reverseScalingIds=="string"?n=[e.reverseScalingIds]:n=e.reverseScalingIds,n.forEach(o=>{const l=document.querySelector(o);if(!l)return;let c=1,d=1;if(typeof t=="number")c=e.width*t,d=e.height*t;else if(typeof t=="string"&&t.includes(",")){const p=t.split(",");c=e.width*Number(p[0]),d=e.height*Number(p[1])}l.style.setProperty("width",`${c}px`),l.style.setProperty("height",`${d}px`),l.style.setProperty("transform",`scale(${s})`),l.style.setProperty("transform-origin","0 0")})}function _(){if(!e.reverseScalingIds)return;(typeof e.reverseScalingIds=="string"?[e.reverseScalingIds]:e.reverseScalingIds).forEach(s=>{const n=document.querySelector(s);n&&(n.style.removeProperty("width"),n.style.removeProperty("height"),n.style.removeProperty("transform"),n.style.removeProperty("transform-origin"))})}function y(){const[t,s]=B();x.value=`scale(${t})`;const n=()=>{m("change",t,s),R(t,s)};e.scaleType===2||e.scaleType===4?r.nextTick(()=>{var c;if(!((c=i.value)!=null&&c.parentElement)){g.value="0",f.value="0",n();return}const o=i.value.parentElement.getBoundingClientRect(),l=i.value.getBoundingClientRect();g.value=`${(o.height-l.height)/2}px`,f.value=`${(o.width-l.width)/2}px`,n()}):(g.value="0",f.value="0",n())}const w=T(()=>y(),()=>e.delay);r.watch(()=>({width:e.width,height:e.height,scaleType:e.scaleType,reverseScalingIds:e.reverseScalingIds,parent:e.parent}),()=>{y()},{deep:!0});const v=new ResizeObserver(()=>{w()});return r.watch(()=>[e.parent,i.value],()=>{var t;v.disconnect(),e.parent&&((t=i.value)!=null&&t.parentElement)&&v.observe(i.value.parentElement)},{flush:"post"}),r.onMounted(()=>{y(),window.addEventListener("resize",w)}),r.onBeforeUnmount(()=>{window.removeEventListener("resize",w),v.disconnect(),_()}),(t,s)=>(r.openBlock(),r.createElementBlock("div",{ref_key:"autoScaleBox",ref:i,class:"auto-scale-box",style:r.normalizeStyle(P.value)},[r.renderSlot(t.$slots,"default")],4))}}),E=[S],I={install:h=>{E.forEach(u=>{h.component(u.name,u)})}};a.VueAutoScale=S,a.default=I,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
//# sourceMappingURL=VueAutoScale.umd.js.map