DemuMesDataV/lib/mixin/autoResize.js

77 lines
1.7 KiB
JavaScript
Raw Normal View History

2019-08-22 14:41:07 +08:00
import { debounce, observerDomResize } from '../util/index'
export default {
data () {
return {
dom: '',
width: 0,
height: 0,
debounceInitWHFun: '',
domObserver: ''
}
},
methods: {
async autoResizeMixinInit () {
const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
await initWH(false)
getDebounceInitWHFun()
bindDomResizeCallback()
if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
},
initWH (resize = true) {
const { $nextTick, $refs, ref, onResize } = this
return new Promise(resolve => {
$nextTick(e => {
const dom = this.dom = $refs[ref]
this.width = dom.clientWidth
this.height = dom.clientHeight
if (typeof onResize === 'function' && resize) onResize()
resolve()
})
})
},
getDebounceInitWHFun () {
const { initWH } = this
this.debounceInitWHFun = debounce(100, initWH)
},
bindDomResizeCallback () {
const { dom, debounceInitWHFun } = this
this.domObserver = observerDomResize(dom, debounceInitWHFun)
window.addEventListener('resize', debounceInitWHFun)
},
unbindDomResizeCallback () {
let { domObserver, debounceInitWHFun } = this
domObserver.disconnect()
domObserver.takeRecords()
domObserver = null
window.removeEventListener('resize', debounceInitWHFun)
}
},
mounted () {
const { autoResizeMixinInit } = this
autoResizeMixinInit()
},
beforeDestroy () {
const { unbindDomResizeCallback } = this
unbindDomResizeCallback()
}
}