Fix potential rendering exceptions.
This commit is contained in:
parent
658537f155
commit
4ac3ad8c5b
|
@ -1,57 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="dv-full-screen-container" ref="full-screen-container">
|
<div id="dv-full-screen-container" :ref="ref">
|
||||||
|
<template v-if="ready">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import autoResize from '../../../mixin/autoResize.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DvFullScreenContainer',
|
name: 'DvFullScreenContainer',
|
||||||
|
mixins: [autoResize],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
ref: 'full-screen-container',
|
||||||
|
allWidth: 0,
|
||||||
scale: 0,
|
scale: 0,
|
||||||
datavRoot: ''
|
datavRoot: '',
|
||||||
|
ready: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init () {
|
afterAutoResizeMixinInit () {
|
||||||
const { initConfig, setAppScale, bindReSizeEventHandler } = this
|
const { initConfig, setAppScale } = this
|
||||||
|
|
||||||
initConfig()
|
initConfig()
|
||||||
|
|
||||||
setAppScale()
|
setAppScale()
|
||||||
|
|
||||||
bindReSizeEventHandler()
|
this.ready = true
|
||||||
},
|
},
|
||||||
initConfig () {
|
initConfig () {
|
||||||
|
const { dom } = this
|
||||||
const { width, height } = screen
|
const { width, height } = screen
|
||||||
|
|
||||||
this.allWidth = width
|
this.allWidth = width
|
||||||
|
|
||||||
const datavRoot = this.datavRoot = this.$refs['full-screen-container']
|
dom.style.width = `${width}px`
|
||||||
|
dom.style.height = `${height}px`
|
||||||
datavRoot.style.width = `${width}px`
|
|
||||||
datavRoot.style.height = `${height}px`
|
|
||||||
},
|
},
|
||||||
setAppScale () {
|
setAppScale () {
|
||||||
const { allWidth, datavRoot } = this
|
const { allWidth, dom } = this
|
||||||
|
|
||||||
const currentWidth = document.body.clientWidth
|
const currentWidth = document.body.clientWidth
|
||||||
|
|
||||||
datavRoot.style.transform = `scale(${currentWidth / allWidth})`
|
dom.style.transform = `scale(${currentWidth / allWidth})`
|
||||||
},
|
},
|
||||||
bindReSizeEventHandler () {
|
onResize () {
|
||||||
const { debounce, setAppScale } = this
|
const { setAppScale } = this
|
||||||
|
|
||||||
if (!debounce) return
|
setAppScale()
|
||||||
|
|
||||||
window.addEventListener('resize', debounce(100, setAppScale))
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
const { init } = this
|
|
||||||
|
|
||||||
init()
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue