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

vue大屏缩放组件

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