vue3 数据大屏适配

目前写了一种适配方案，整体实现上感觉还行，但还是会有细微的问题，如果有更好的方案，欢迎一起留言沟通

描述:根据屏幕比例算缩放度, 因此无论放大缩小屏幕，都是同样布局，然后把参数给外层容器就行了 用v-bind绑定一下

import { ref, toValue } from 'vue';
import { useEventListener, useWindowSize } from '@vueuse/core';

export function useResize() {
  const transform = ref();

  const { width, height } = useWindowSize();

  function setScale() {
    const scaleX = toValue(width) / 1920;
    const scaleY = toValue(height) / 1080;

    transform.value = `scale(${scaleX},${scaleY})`;
  }

  useEventListener('resize', setScale);

  setScale();

  return {
    transform,
  };
}

import { useResize } from '@/common/common-transform.js';

const { transform } = useResize();


<style scoped lang="scss">
.system-main {
  width: 1920px;
  height: 1080px;
  transform: v-bind(transform);
  transform-origin: 0 0;
}
</style>