ant-design-vue/components/_util/ContainerRender.jsx

95 lines
2.2 KiB
Vue
Raw Normal View History

2018-03-19 10:16:27 +08:00
2018-03-05 19:05:23 +08:00
import Vue from 'vue'
import PropTypes from './vue-types'
export default {
props: {
autoMount: PropTypes.bool.def(true),
autoDestroy: PropTypes.bool.def(true),
visible: PropTypes.bool,
forceRender: PropTypes.bool.def(false),
parent: PropTypes.any,
getComponent: PropTypes.func.isRequired,
getContainer: PropTypes.func.isRequired,
children: PropTypes.func.isRequired,
},
mounted () {
if (this.autoMount) {
this.renderComponent()
}
},
updated () {
if (this.autoMount) {
this.renderComponent()
}
},
beforeDestroy () {
if (this.autoDestroy) {
this.removeContainer()
}
},
methods: {
removeContainer () {
if (this.container) {
this._component && this._component.$destroy()
this.container.parentNode.removeChild(this.container)
this.container = null
}
},
2018-03-07 21:36:15 +08:00
renderComponent (props = {}, ready) {
2018-10-10 13:43:10 +08:00
const { visible, forceRender, getContainer, parent } = this
2018-03-05 19:05:23 +08:00
const self = this
if (visible || parent.$refs._component || forceRender) {
2018-03-07 21:36:15 +08:00
let el = this.componentEl
2018-03-05 19:05:23 +08:00
if (!this.container) {
this.container = getContainer()
2018-03-07 21:36:15 +08:00
el = document.createElement('div')
this.componentEl = el
this.container.appendChild(el)
2018-03-05 19:05:23 +08:00
}
if (!this._component) {
this._component = new Vue({
2018-03-07 21:36:15 +08:00
data: {
comProps: props,
},
2018-03-05 19:05:23 +08:00
parent: self.parent,
2018-03-07 21:36:15 +08:00
el: el,
2018-03-05 19:05:23 +08:00
mounted () {
2018-03-05 22:50:25 +08:00
this.$nextTick(() => {
2018-03-05 19:05:23 +08:00
if (ready) {
ready.call(self)
}
})
},
2018-05-30 14:11:36 +08:00
updated () {
this.$nextTick(() => {
if (ready) {
ready.call(self)
}
})
},
2018-03-05 19:05:23 +08:00
render () {
2018-10-10 13:43:10 +08:00
return self.getComponent(this.comProps)
2018-03-05 19:05:23 +08:00
},
})
2018-03-07 21:36:15 +08:00
} else {
this._component.comProps = props
2018-03-05 19:05:23 +08:00
}
}
},
},
render () {
return this.children({
renderComponent: this.renderComponent,
removeContainer: this.removeContainer,
})
},
}