79 lines
2.6 KiB
JavaScript
79 lines
2.6 KiB
JavaScript
|
import {sendMessage} from '@/utils/iframe';
|
||
|
|
|
||
|
|
const VISUAL_CONFIG = {width: 9450, height: 3000}
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
autoStyle: {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getAutoStyle()
|
||
|
|
this.initScaleEvent()
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
this._removeScaleEvent()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getAutoStyle() {
|
||
|
|
const innerHeight = window.innerHeight
|
||
|
|
const innerWidth = window.innerWidth
|
||
|
|
const {scale, origin, position, type} = this.getScale()
|
||
|
|
sendMessage('scale', {scale, type, innerHeight, innerWidth})
|
||
|
|
localStorage.setItem('scale', JSON.stringify({scale, type, innerHeight, innerWidth}))
|
||
|
|
this.autoStyle = {
|
||
|
|
width: VISUAL_CONFIG.width + 'px',
|
||
|
|
height: VISUAL_CONFIG.height + 'px',
|
||
|
|
transform: `scale(${scale})`,
|
||
|
|
transformOrigin: origin,
|
||
|
|
...position
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getScale() {
|
||
|
|
let scale = 1
|
||
|
|
// 1 按照高度缩放 2 按照宽度缩放
|
||
|
|
let type = 1
|
||
|
|
let origin = 'top center'
|
||
|
|
const innerWidth = window.innerWidth
|
||
|
|
const innerHeight = window.innerHeight
|
||
|
|
const widthScale = innerWidth / VISUAL_CONFIG.width
|
||
|
|
const scaleHeight = VISUAL_CONFIG.height * widthScale
|
||
|
|
const position = {left: 0, top: 0, marginTop: 0, marginLeft: 0}
|
||
|
|
if (scaleHeight <= innerHeight) {
|
||
|
|
origin = 'left center'
|
||
|
|
scale = widthScale
|
||
|
|
position.left = 0
|
||
|
|
position.top = '50%'
|
||
|
|
position.marginTop = -VISUAL_CONFIG.height / 2 + 'px'
|
||
|
|
position.marginLeft = 0
|
||
|
|
let type = 2
|
||
|
|
|
||
|
|
if (scale > 1) {
|
||
|
|
origin = 'left top'
|
||
|
|
position.left = 0
|
||
|
|
position.top = 0
|
||
|
|
position.marginTop = 0
|
||
|
|
position.marginLeft = 0
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
scale = innerHeight / VISUAL_CONFIG.height
|
||
|
|
position.left = '50%'
|
||
|
|
position.top = 0
|
||
|
|
position.marginTop = 0
|
||
|
|
position.marginLeft = -VISUAL_CONFIG.width / 2 + 'px'
|
||
|
|
}
|
||
|
|
return {scale, origin, position, type}
|
||
|
|
},
|
||
|
|
|
||
|
|
initScaleEvent() {
|
||
|
|
window.addEventListener('resize', this.getAutoStyle.bind(this))
|
||
|
|
},
|
||
|
|
_removeScaleEvent() {
|
||
|
|
window.removeEventListener('resize', this.getAutoStyle.bind(this))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|