


export default {
name: 'test',
data() {
return {
screen_config: {
scale: 0.99, // 默认缩放值
width: 1920, // 设计尺寸 4096
height: 1080 // // 设计尺寸 2160
}
}
},
mounted() {
const _self = this
_self.resetScreen()
_self.setScale()
window.addEventListener("resize", this.debounce(this.setScale))
},
methods: {
// 重置默认 设计尺寸(初始尺寸)
resetScreen(){
const _self = this
const { width, height, scale } = _self.screen_config
_self.screen_config.width = width*scale
_self.screen_config.height = height*scale
console.log('resetScreen width = ', _self.screen_config.width, _self.screen_config.height)
},
// 获取大屏适配scale值
getScale() {
const _self = this
// 固定好16:9的宽高比,计算出最合适的缩放比
const { width, height, scale } = _self.screen_config
let ww = window.innerWidth / width
let wh = window.innerHeight / height
_self.screen_config.width = window.innerWidth*scale
_self.screen_config.height = window.innerHeight*scale
if(wh<=1){
wh = Math.ceil(wh)
ww = Math.ceil(ww)
}
else{
wh = Math.floor(wh)
ww = Math.floor(ww)
}
// console.log('getScale ww = ', ww, ', wh = ',wh, `[${window.innerHeight / height}]`)
return ww < wh ? ww : wh; // 宽 < 高 => 以 高 为准; 反之以 宽 为准
},
// 设置大屏适配scale值
setScale() {
const _self = this
// 获取到缩放比例,设置它
_self.scale = this.getScale();
if (_self.$refs.ScaleBox) {
_self.$refs.ScaleBox.style.setProperty("--scale", this.scale);
setTimeout(()=>{ if (_self.$refs.ScaleBox) { _self.$refs.ScaleBox.style.visibility = 'visible' } },0.1*1000)
}
},
debounce(fn, delay) {
const delays = delay || 500
let timer
return function () {
const th = this
const args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
timer = null
fn.apply(th, args)
}, delays)
}
},