Fix potential rendering exceptions.

This commit is contained in:
jiaming743 2019-07-04 17:12:04 +08:00
parent 658537f155
commit 4ac3ad8c5b
1 changed files with 22 additions and 22 deletions

View File

@ -1,57 +1,57 @@
<template> <template>
<div id="dv-full-screen-container" ref="full-screen-container"> <div id="dv-full-screen-container" :ref="ref">
<slot></slot> <template v-if="ready">
<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>