【企业开发】大屏的响应式处理

【企业开发】大屏的响应式处理

如图：

响应式工具封装

// 等比缩放方式屏幕适配
export function screenAdaptive(designWidth = 1920, designHeight = 1080) {const screenWidth =document.documentElement.clientWidth || document.body.clientWidthconst screenHeight =document.documentElement.clientHeight || document.body.clientHeightconst scaleX = screenWidth / designWidthconst scaleY = screenHeight / designHeightconst { body } = documentbody.style.transformOrigin = 'left top'body.style.position = 'relative'body.style.width = `${designWidth}px`body.style.height = `${designHeight}px`body.style.boxSizing = 'border-box'body.style.transform = `scale(${scaleX},${scaleY})`
}// 关闭适配
export function unScreenAdaptive() {const { body } = documentbody.style.transformOrigin = ''body.style.position = ''body.style.width = '100%'body.style.height = '100%'body.style.boxSizing = ''body.style.transform = ''
}

在大屏组件中添加响应式处理

安装工具

$ pnpm add lodash

Vue组件中

<script lang="ts" setup>
import _ from 'lodash'
import { onBeforeMount, onUnmounted, watch } from 'vue'
import { screenAdaptive, unScreenAdaptive } from '@/utils/screen-adaptive'const watchScreenAdaptive = (notUninstall = true) => {if (notUninstall) {screenAdaptive(1912, 932)window.addEventListener('resize',_.throttle(() => screenAdaptive(1912, 932), 300))} else {window.removeEventListener('resize',_.throttle(() => screenAdaptive(1912, 932), 300))}
}onBeforeMount(() => watchScreenAdaptive())onUnmounted(() => {unScreenAdaptive()watchScreenAdaptive(false)
})
</script>