ly-scale-screen/dist/ly-scale-screen.cjs

vue3大屏自适应组件

"use strict";const o=require("vue");function x(t,r){let l;return function(...e){l&&clearTimeout(l),l=setTimeout(()=>{typeof t=="function"&&t.apply(null,e),clearTimeout(l)},r>0?r:100)}}const H=o.defineComponent({name:"VScaleScreen",props:{width:{type:[String,Number],default:1920},height:{type:[String,Number],default:1080},fullScreen:{type:Boolean,default:!1},autoScale:{type:[Object,Boolean],default:!0},delay:{type:Number,default:500},boxStyle:{type:Object,default:()=>({})},wrapperStyle:{type:Object,default:()=>({})},bodyOverflowHidden:{type:Boolean,default:!0}},setup(t,{slots:r}){let l;const e=o.reactive({width:0,height:0,originalWidth:0,originalHeight:0,observer:null}),f={box:{overflow:"hidden",backgroundSize:"100% 100%",backgroundColor:"#000",width:"100vw",height:"100vh"},wrapper:{transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"500ms",position:"relative",overflow:"hidden",zIndex:100,transformOrigin:"left top"}},n=o.ref(),v=()=>new Promise(i=>{o.nextTick(()=>{var a,d;t.width&&t.height?(e.width=t.width,e.height=t.height):(e.width=(a=n.value)==null?void 0:a.clientWidth,e.height=(d=n.value)==null?void 0:d.clientHeight),(!e.originalHeight||!e.originalWidth)&&(e.originalWidth=window.screen.width,e.originalHeight=window.screen.height),i()})});function b(){t.bodyOverflowHidden&&(l=document.body.style.overflow,document.body.style.overflow="hidden")}const w=()=>{e.width&&e.height?(n.value.style.width=`${e.width}px`,n.value.style.height=`${e.height}px`):(n.value.style.width=`${e.originalWidth}px`,n.value.style.height=`${e.originalHeight}px`)},m=i=>{if(!t.autoScale)return;const a=n.value.clientWidth,d=n.value.clientHeight,g=document.body.clientWidth,u=document.body.clientHeight;n.value.style.transform=`scale(${i},${i})`;let c=Math.max((g-a*i)/2,0),h=Math.max((u-d*i)/2,0);typeof t.autoScale=="object"&&(!t.autoScale.x&&(c=0),!t.autoScale.y&&(h=0)),n.value.style.margin=`${h}px ${c}px`},s=()=>{const i=document.body.clientWidth,a=document.body.clientHeight,d=e.width||e.originalWidth,g=e.height||e.originalHeight,u=i/+d,c=a/+g;if(t.fullScreen)return n.value.style.transform=`scale(${u},${c})`,!1;const h=Math.min(u,c);m(h)},y=x(async()=>{await v(),w(),s()},t.delay),S=()=>{(e.observer=new MutationObserver(()=>{y()})).observe(n.value,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0})};return o.onMounted(()=>{b(),o.nextTick(async()=>{await v(),w(),s(),window.addEventListener("resize",y),S()})}),o.onUnmounted(()=>{var i;window.removeEventListener("resize",y),(i=e.observer)==null||i.disconnect(),t.bodyOverflowHidden&&(document.body.style.overflow=l)}),o.onActivated(s),()=>{var i;return o.h("div",{className:"v-screen-box",style:{...f.box,...t.boxStyle}},[o.h("div",{className:"screen-wrapper",style:{...f.wrapper,...t.wrapperStyle},ref:n},(i=r.default)==null?void 0:i.call(r))])}}});module.exports=H;