数据大屏适配方法

1.在components目录下封装一个全局组件 命名为ScreenAdapter.vue

<template>
	<div class="screen-adapter" :style="style">
		<slot />
	</div>
</template>

<script lang="ts" setup>
import { withDefaults, reactive, onMounted } from 'vue'

interface ScreenAdapterState {
	width?: number
	height?: number
}

/**
 * s:{
 *   color: '',
 *   width: '',
 *   height: ''
 * }
 * v-bind:params="s"
 * props parms{}
 * v-bind 属性绑定 单向传递 当传递对象过去的时候只能全称（v-bind）
 * v-on 事件绑定
 * v-model 双向绑定
 * withDefaults设置props默认值
 * defineProps<ScreenAdapterState>()获取父元素传递的参数
 */
const props = withDefaults(defineProps<ScreenAdapterState>(), {
	width: 1920,
	height: 1080
})
const style = reactive({
	width: props.width + 'px',
	height: props.height + 'px',
	transform: 'scale(1) translate(-50%, -50%)'
})
/**
 * 每隔3秒就去获取屏幕的大小计算缩放的比例，从而进行屏幕的适配
 * 函数防抖：
 * 函数节流
 */
const Debounce = (fn: () => void, t: number): (() => void) => {
	const delay = t || 500
	//eslint-disable-next-line no-undef
	let timer: NodeJs.Timerout | null
	return function () {
		if (timer) {
			clearTimeout()
		}
		timer = setTimeout(() => {
			timer = null
			fn()
		}, delay)
	}
}
const getScale = () => {
	const w = window.innerWidth / props.width
	const h = window.innerHeight / props.height
	return { w, h }
}
const setScale = () => {
	const w = getScale().w
	const h = getScale().h
	style.transform = 'scaleX(' + w + ') scaleY(' + h + ') translate(-50%, -50%)'
}
onMounted(() => {
	setScale()
	window.onresize = Debounce(setScale, 3000)
})
</script>

<style lang="scss" scoped>
.screen-adapter {
	position: absolute;
	left: 50%;
	top: 50%;
	transition: 0.3s;
	transform-origin: 0 0;
}
</style>

2.在views/home/Index.vue中使用

<template>
	<div>
		<screen-adapter>
		<h2>数据大屏适配</h2>
		</screen-adapter>
	</div>
</template>

<script setup lang="ts">
import ScreenAdapter from '../../components/ScreenAdapter.vue'
</template>

<script setup lang="ts">
</style>