v-bigscreen/dist/v-scale-screen.cjs

大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应（会存在拉伸问题）

"use strict";const n=require("vue");function w(t,e){let o;return function(...i){o&&clearTimeout(o),o=setTimeout(()=>{typeof t=="function"&&t.apply(null,i),clearTimeout(o)},e>0?e:100)}}const b=n.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:()=>({})}},setup(t){const e=n.reactive({width:0,height:0,originalWidth:0,originalHeight:0,observer:null}),o={box:{overflow:"hidden",backgroundSize:"100% 100%",background:"#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"}},i=n.ref(),c=()=>new Promise(r=>{n.nextTick(()=>{var a,l;t.width&&t.height?(e.width=t.width,e.height=t.height):(e.width=(a=i.value)==null?void 0:a.clientWidth,e.height=(l=i.value)==null?void 0:l.clientHeight),(!e.originalHeight||!e.originalWidth)&&(e.originalWidth=window.screen.width,e.originalHeight=window.screen.height),r()})}),d=()=>{e.width&&e.height?(i.value.style.width=`${e.width}px`,i.value.style.height=`${e.height}px`):(i.value.style.width=`${e.originalWidth}px`,i.value.style.height=`${e.originalHeight}px`)},v=r=>{if(!t.autoScale)return;const a=i.value.clientWidth,l=i.value.clientHeight,y=document.body.clientWidth,u=document.body.clientHeight;i.value.style.transform=`scale(${r},${r})`;let s=Math.max((y-a*r)/2,0),h=Math.max((u-l*r)/2,0);typeof t.autoScale=="object"&&(!t.autoScale.x&&(s=0),!t.autoScale.y&&(h=0)),i.value.style.margin=`${h}px ${s}px`},f=()=>{const r=document.body.clientWidth,a=document.body.clientHeight,l=e.width||e.originalWidth,y=e.height||e.originalHeight,u=r/+l,s=a/+y;if(t.fullScreen)return i.value.style.transform=`scale(${u},${s})`,!1;const h=Math.min(u,s);v(h)},g=w(async()=>{await c(),d(),f()},t.delay),m=()=>{(e.observer=new MutationObserver(()=>{g()})).observe(i.value,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0})};return n.onMounted(()=>{n.nextTick(async()=>{await c(),d(),f(),window.addEventListener("resize",g),m()})}),n.onUnmounted(()=>{var r;window.removeEventListener("resize",g),(r=e.observer)==null||r.disconnect()}),{screenWrapper:i,styles:o}}}),p=(t,e)=>{const o=t.__vccOpts||t;for(const[i,c]of e)o[i]=c;return o};function S(t,e,o,i,c,d){return n.openBlock(),n.createElementBlock("section",{style:n.normalizeStyle({...t.styles.box,...t.boxStyle}),class:"v-screen-box"},[n.createElementVNode("div",{style:n.normalizeStyle({...t.styles.wrapper,...t.wrapperStyle}),class:"screen-wrapper",ref:"screenWrapper"},[n.renderSlot(t.$slots,"default")],4)],4)}const x=p(b,[["render",S]]);module.exports=x;