- 组件挂载时,判断是否需要进行缩放(通过
isScale
计算属性)。 - 如果需要缩放,首先执行一次
calcRate
方法以计算初始缩放比例,然后监听窗口的resize
事件以响应窗口大小的变化。 - 当窗口大小发生变化时,
resize
方法被触发。该方法利用定时器来实现防抖,确保在一定延迟后只执行一次calcRate
方法,从而重新计算缩放比例。 calcRate
方法根据当前窗口的宽高比与设计稿的宽高比来决定如何缩放内容,并通过修改appRef
元素的transform
属性来实现内容的缩放和居中。
// 屏幕适配 mixin 函数
// * 默认缩放值
const scale = {
width: '1',
height: '1',
}
// * 设计稿尺寸(px)
const baseWidth = 1920
const baseHeight = 1080
// * 需保持的比例(默认1.77778)
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
export default {
data() {
return {
// * 定时函数
drawTiming: null,
}
},
computed: {
isScale(){
return this.$store.state.setting.isScale
}
},
mounted () {
if(!this.isScale){
return
}
this.calcRate()
window.addEventListener('resize', this.resize)
},
beforeDestroy () {
window.removeEventListener('resize', this.resize)
},
methods: {
calcRate () {
const appRef = this.$refs["appRef"]
if (!appRef) return
// 当前宽高比
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
if (appRef) {
if (currentRate > baseProportion) {
// 表示更宽
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
scale.height = (window.innerHeight / baseHeight).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
} else {
// 表示更高
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
scale.width = (window.innerWidth / baseWidth).toFixed(5)
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
}
}
},
resize () {
if(!this.isScale){
return
}
clearTimeout(this.drawTiming)
this.drawTiming = setTimeout(() => {
this.calcRate()
}, 200)
}
},
}
<template>
<div id="index" ref="appRef" class="index_home" :class="{ page_is_scale: isScale }">
<div class="bg">
<dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="host_body">
<!-- 头部 s -->
<div class="d-flex jc-center title_wrap">
<div class="zuojuxing"></div>
<div class="youjuxing"></div>
<div class="guang"></div>
<div class="d-flex jc-center">
<div class="title">
<span class="title-text">可视化平台</span>
</div>
</div>
<div class="timers ">
{{ dateYear }} {{ dateWeek }} {{ dateDay }}
</div>
</div>
<!-- 头部 e-->
<!-- 内容 s-->
<router-view></router-view>
<!-- 内容 e -->
</div>
</div>
</div>
</template>
<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
export default {
mixins: [drawMixin],
data() {
return {
timing: null,
loading: true,
dateDay: null,
dateYear: null,
dateWeek: null,
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
};
},
filters: {
numsFilter(msg) {
return msg || 0;
},
},
computed: {
},
created() {
},
mounted() {
this.timeFn();
this.cancelLoading();
},
beforeDestroy() {
clearInterval(this.timing);
},
methods: {
showSetting() {
this.$refs.setting.init()
},
timeFn() {
this.timing = setInterval(() => {
this.dateDay = formatTime(new Date(), "HH: mm: ss");
this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
this.dateWeek = this.weekday[new Date().getDay()];
}, 1000);
},
cancelLoading() {
setTimeout(() => {
this.loading = false;
}, 500);
},
},
};
</script>
<style lang="scss">
@import "./home.scss";
</style>