You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
1.6 KiB
77 lines
1.6 KiB
import Vue from 'vue'
|
|
function defaultGetContainer () {
|
|
const container = document.createElement('div')
|
|
document.body.appendChild(container)
|
|
return container
|
|
}
|
|
|
|
export default function getContainerRenderMixin (config) {
|
|
const {
|
|
autoMount = true,
|
|
autoDestroy = true,
|
|
isVisible,
|
|
isForceRender,
|
|
getComponent,
|
|
getContainer = defaultGetContainer,
|
|
} = config
|
|
|
|
let mixin
|
|
if (autoMount) {
|
|
mixin = {
|
|
...mixin,
|
|
mounted () {
|
|
// this.renderComponent()
|
|
},
|
|
}
|
|
}
|
|
|
|
if (autoDestroy) {
|
|
mixin = {
|
|
...mixin,
|
|
beforeDestroy () {
|
|
// this.removeContainer()
|
|
},
|
|
}
|
|
}
|
|
mixin = {
|
|
...mixin,
|
|
methods: {
|
|
removeContainer () {
|
|
if (this._container) {
|
|
const container = this._container
|
|
container.parentNode.removeChild(container)
|
|
this._container = null
|
|
}
|
|
},
|
|
renderComponent (componentArg) {
|
|
if (
|
|
!isVisible || this._component || isVisible(this) ||
|
|
(isForceRender && isForceRender(this))
|
|
) {
|
|
if (!this._container) {
|
|
this._container = getContainer(this)
|
|
}
|
|
let component
|
|
if (this.getComponent) {
|
|
component = this.getComponent(componentArg)
|
|
} else {
|
|
component = getComponent(this, componentArg)
|
|
}
|
|
this._component = component
|
|
const vmC = document.createElement('div')
|
|
this._container.appendChild(vmC)
|
|
|
|
new Vue({
|
|
el: vmC,
|
|
render () {
|
|
return component
|
|
},
|
|
})
|
|
}
|
|
},
|
|
},
|
|
}
|
|
|
|
return mixin
|
|
}
|