vue大屏固定比例自适应

废话不多说直接上代码

<template>
  <div id="app">
    <div :style="{ transform: `scale(${zoomIndex})` }" class="routerPage">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      zoomIndex: 1,
    };
  },
  created() {
    // 3840是设计图所给的宽度
    this.zoomIndex = document.documentElement.clientWidth / 3840; 
    this.$store.dispatch('setZoom', this.zoomIndex);
    window.addEventListener('resize', () => {
      this.zoomIndex = document.documentElement.clientWidth / 3840;
    });
  },
};
</script>
<style scoped>
#app {
  height: 100%;
  width: 100%;
  background: #155db9;
  position: absolute;
}
.routerPage {
  position: fixed;
  transform-origin: 0 0;
}
</style>

此处还可以继续优化，加个防抖函数，然后再加个beforeDestroyed钩子去销毁这个事件，要提供的思路就是通过css的scale属性，去控制页面的缩放，开发的过程中，所有的单位也只需要是ui所给的单位即可。