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

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

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