大屏适配解决方案__Vue3.0__前端

大屏中演示的大数据页面，出现了文字、图表、表格等多类组件显示错乱的情况。

1. 封装一个全局组件

<template>
  <div
    class="ScreenAdapter"
    :style="style"
  >
    <slot />
  </div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
  name: '',
  // 参数注入
  props: {
    width: {
      type: String,
      default: '1920'
    },
    height: {
      type: String,
      default: '969'
    }
  },
  setup(props) {
    const style = ref({
      width: props.width + 'px',
      height: props.height + 'px',
      transform: 'scale(1) translate(-50%, -50%)'
    });
    const getScale = () => {
      const w = window.innerWidth / props.width;
      const h = window.innerHeight / props.height;
      return w < h ? w : h;
    };
    const setScale = () => {
      style.value.transform = 'scale(' + getScale() + ') translate(-50%, -50%)';
    };
    onMounted(() => {
      setScale();
      window.onresize = setScale;
    });
    return {
      style
    };
  }
};
</script>
  <style lang="scss" scoped>
  .ScreenAdapter {
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    // background: red;
  }
  </style>

2. 将此组件作为外壳，包在我们搭建的页面上

<ScreenAdapter> <div>大家好，我是大屏展示页面</div> </ScreenAdapter>

3. 定义网页规范

根据美工给出的设计（主要获取美工给出的分辨率，如1920*1080）。
Div布局多采用flex+百分比布局（当然也可以根据美工给出的设计，默认写px。）。
各类空间设计，根据美工给出的px进行定义即可

原文链接：https://www.vue-js.com/topic/60cff8a596b2cb0032c3902d