Vues data large screen adaptation scale scaling solution

1. First create a drawMixin.js file in the utils folder

// 屏幕适配 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)
  },
  beforeDestroy () {
    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)
    }
  },
}

2. Create html structure

<template>
  <div id="index" ref="appRef">
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div class="home">
      ...
    </div>
  </div>
</template>

3.css style

#index {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
  overflow: hidden;
  .home {
    background: url("./../assets/image/bannerBG.png") no-repeat center center;
    background-size: 100% 100%;
    padding: 16px 16px 0 16px;
    width: 100%;
    height: 100%;
  }
}

4.Introduce and mix the drawMixin.js object in the HomeView.vue file

import drawMixin from "../utils/drawMixin";

export default {
  mixins: [drawMixin],
  data() {},
  ...
}

5. Concept sharing

Mixins, the official description is a very flexible way to distribute reusable functions in Vue components. Mixins is a js object, which can contain any functional options in the script items in our components, such as: data, components , methods, created, computed, etc. We only need to pass the common functions into the mixins options in the form of objects. When the component uses the mixins object, all the options of the mixins object will be mixed into the options of the component itself. This can improve the reusability of the code and make it easier to Later code maintenance.