vue大屏固定比例自适应

废话不多说直接上代码

1<template>
2  <div id="app">
3    <div :style="{ transform: `scale(${zoomIndex})` }" class="routerPage">
4      <router-view />
5    </div>
6  </div>
7</template>
8
9<script>
10export default {
11  name: 'App',
12  data() {
13    return {
14      zoomIndex: 1,
15    };
16  },
17  created() {
18    // 3840是设计图所给的宽度
19    this.zoomIndex = document.documentElement.clientWidth / 3840; 
20    this.$store.dispatch('setZoom', this.zoomIndex);
21    window.addEventListener('resize', () => {
22      this.zoomIndex = document.documentElement.clientWidth / 3840;
23    });
24  },
25};
26</script>
27<style scoped>
28#app {
29  height: 100%;
30  width: 100%;
31  background: #155db9;
32  position: absolute;
33}
34.routerPage {
35  position: fixed;
36  transform-origin: 0 0;
37}
38</style>
39

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