/*
|
* @Author: daidai
|
* @Date: 2022-02-28 10:48:02
|
* @LastEditors: Please set LastEditors
|
* @LastEditTime: 2022-04-26 14:55:41
|
* @FilePath: \web-pc\src\pages\big-screen\utils\drawMixin.js
|
*/
|
// 屏幕适配 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)
|
}
|
},
|
}
|
