vue 大屏适配方案 - 锁定宽高比

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

创建一个外层包裹容器，，用该容器包裹所有的router-view,根据屏幕的可视区尺寸与设计稿尺寸得到一个宽高缩放比例，根据比例去对外层包裹容器进行缩放，以适应屏幕

包裹容器完整代码：

<template>
    <div id="container" ref="wrapper">
        <template v-if="show">
            <slot></slot>
        </template>
    </div>
</template>

<script>
export default {
    name: 'Layout',
    props: {
        options: Object   //object，包含大屏的宽度和高度，以保持宽高比    
    },
    data() {
        return {
            width:0, //传入的宽
            height:0, //传入的宽
            originalWidth:0, //视口宽度
            originalHeight:0,//视口高度
            dom:null,   //最外层DOM元素
            show: false
        }
    },
    mounted() {
        this.init();
        this.updateSize();
        this.updateScale();
        const self = this;
        window.addEventListener("resize", () =>{   //绑定的全局事件要在组件销毁时解除绑定
            self.init();
        });
        this.show = true
    },
    beforeDestroy() {
        const self = this;
        window.removeEventListener("resize", () => {
            self.init();
        });
    },
    methods:{
        init() {   
            //获取大屏真实宽高
            this.dom  = this.$refs["wrapper"];
            if(this.options && this.options.width && this.options.height){
                this.width = this.options.width;
                this.height = this.options.height;
            }else{
                this.width = this.dom.clientWidth;
                this.height = this.dom.clientHeight;
            }

            //获取屏幕的宽高
            this.originalWidth = window.screen.width;
            this.originalHeight = window.screen.height;
            
            // console.log(this.width, this.height, this.originalWidth, this.originalHeight);
            this.updateScale()
        },
        updateSize() {  //给外层容器设置宽高
            if(this.width && this.height) {
                this.dom.style.width = `${this.width}px`;
                this.dom.style.height = `${this.height}px`;
            }else{
                this.dom.style.width = `${this.originalWidth}px`
                this.dom.style.height = `${this.originalHeight}px`
            }
        },
        updateScale(){   //控制外层容器缩放
            const currentWidth = document.body.clientWidth;
            const currentHeight = document.body.clientHeight;

            const realWidth = this.width || this.originalWidth;
            const realHeight = this.height || this.originalHeight;

            const widthScale = currentWidth / realWidth;
            const heightScale = currentHeight / realHeight;
            this.dom.style.transform = `scale(${widthScale}, ${heightScale})`
        }
    }
}
</script>

<style lang="stylus">
    #container
        position fixed
        top 0
        left 0
        overflow hidden
        z-index 10
        transform-origin left top
</style>

传入设计稿宽高后，页面元素宽高根据设计稿大小去写就好，页面会自动缩放以适应屏幕

如何使用？ 在我们的App.vue中：

1、引入layout组件，并传入设计稿的宽度和高度

2、用我们写的Layout组件去包裹 router-view 组件，即可实现根据宽高比自动缩放的功能

<template>
  <div id="app" style="background: #f6f7fb;">
  	<layout :options="{width:3840，height:2160}">
  		<router-view />
  	</layout>
  </div>
</template>

<script>
import Layout from "外层容器的路径"
export default {
  name: 'App'
}
</script>