Vue大屏幕等比例缩放

使用混入Mixin

在utils文件夹下新建drawMixin.js 文件，实现等比例缩放代码如下

// 屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
    width: '1',
    height: '1'
}

// *设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080

// *需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))

export default {
    data() {
        return {
            // 定时函数
            drawTiming: null
        }
    },
    mounted() {
        this.calcRate()
        window.addEventListener('resize', this.resize)
    },
    beforeDestory() {
        window.removeEventListener('resize', this.resize)
    },
    methods: {
        calcRate() {
            const appRef = this.$refs["appRef"]
            if(!appRef) return
            // 当前宽高比
            const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
            if(appRef) {
                if(currentRate > baseProportion) {
                    // 表示更宽
                    scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
                    scale.height = (window.innerHeight / baseHeight).toFixed(5)
                    appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
                } else {
                    // 表示更高
                    scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
                    scale.width = (window.innerWidth / baseWidth).toFixed(5)
                    appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
                }
            }
        },
        resize() {
            clearTimeout(this.drawTiming)
            this.drawTiming = setTimeout(() => {
                this.calcRate()
            }, 200)
        }
    }
} 

在App.vue页面引入

import drawMixin from '@/utils/drawMixin.js'
export default{
    name: 'App',
    mixins: [drawMixin],
    setup() {
        return {}
    }
}