Vue3大屏适配组件方法实例(Scale/Rem双方案一键切换)

<template>
   <div class="screen-adapter" :class="{ 'scale-mode': type === 'scale' }">
    <!-- 大屏所有内容插槽 -->
    <slot />
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';

const props = defineProps({
  // 适配模式：scale / rem
  type: {
    type: String,
    default: 'scale', // 默认用不变形的scale
    validator: val => ['scale', 'rem'].includes(val)
  },
  // 设计稿宽高
  designWidth: {
    type: Number,
    default: 1920
  },
  designHeight: {
    type: Number,
    default: 1080
  }
});

let resizeFn = null;

// 1. Scale 整体缩放适配
function initScale() {
  const wrap = document.querySelector('.screen-adapter');
  if (!wrap) return;

  const clientW = document.documentElement.clientWidth;
  const clientH = document.documentElement.clientHeight;

  const scaleW = clientW / props.designWidth;
  const scaleH = clientH / props.designHeight;
  const scale = Math.min(scaleW, scaleH);

  wrap.style.transform = `translate(-50%, -50%) scale(${scale})`;
}

// 2. Rem 等分适配 设计稿px直接写rem
function initRem() {
  const clientW = document.documentElement.clientWidth;
  // 把屏幕分成100份 1rem = 1%屏幕宽
  document.documentElement.style.fontSize = clientW / 100 + 'px';
}

// 初始化适配
function adapterInit() {
  if (props.type === 'scale') {
    initScale();
  } else {
    initRem();
  }
}

onMounted(() => {
  adapterInit();
  resizeFn = adapterInit;
  window.addEventListener('resize', resizeFn);
});

onUnmounted(() => {
  window.removeEventListener('resize', resizeFn);
});
</script>

<style scoped>
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.screen-adapter {
  position: fixed;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
}

/* Scale模式固定画布大小 */
.scale-mode {
  width: 1920px;
  height: 1080px;
}
</style>

<template>
  <!-- 只用包一层，内部全部按1920*1080写px即可 -->
  <ScreenAdapter type="scale">
    <!-- 你的大屏页面内容 -->
    <div class="title">智慧公路大屏</div>
  </ScreenAdapter>
</template>

<script setup>
import ScreenAdapter from '@/components/ScreenAdapter.vue';
</script>

<style>
.title {
  /* 直接写px，不用任何换算 */
  font-size: 36px;
  width: 400px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
</style>

<ScreenAdapter type="rem">
  内部大屏内容
</ScreenAdapter>