2019-01-12 11:33:27 +08:00
|
|
|
import Vue from 'vue';
|
|
|
|
import PropTypes from './vue-types';
|
2019-08-28 10:50:19 +08:00
|
|
|
import Base from '../base';
|
2018-03-05 19:05:23 +08:00
|
|
|
|
|
|
|
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,
|
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
mounted() {
|
2018-03-05 19:05:23 +08:00
|
|
|
if (this.autoMount) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.renderComponent();
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
updated() {
|
2018-03-05 19:05:23 +08:00
|
|
|
if (this.autoMount) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.renderComponent();
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
beforeDestroy() {
|
2018-03-05 19:05:23 +08:00
|
|
|
if (this.autoDestroy) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.removeContainer();
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2019-01-12 11:33:27 +08:00
|
|
|
removeContainer() {
|
2018-03-05 19:05:23 +08:00
|
|
|
if (this.container) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this._component && this._component.$destroy();
|
|
|
|
this.container.parentNode.removeChild(this.container);
|
|
|
|
this.container = null;
|
2019-05-06 09:52:24 +08:00
|
|
|
this._component = null;
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
renderComponent(props = {}, ready) {
|
|
|
|
const { visible, forceRender, getContainer, parent } = this;
|
|
|
|
const self = this;
|
2018-03-05 19:05:23 +08:00
|
|
|
if (visible || parent.$refs._component || forceRender) {
|
2019-01-12 11:33:27 +08:00
|
|
|
let el = this.componentEl;
|
2018-03-05 19:05:23 +08:00
|
|
|
if (!this.container) {
|
2019-01-12 11:33:27 +08:00
|
|
|
this.container = getContainer();
|
|
|
|
el = document.createElement('div');
|
|
|
|
this.componentEl = el;
|
|
|
|
this.container.appendChild(el);
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
|
|
|
if (!this._component) {
|
2019-08-28 10:50:19 +08:00
|
|
|
const V = Base.Vue || Vue;
|
|
|
|
this._component = new V({
|
2019-02-01 17:23:00 +08:00
|
|
|
el: el,
|
|
|
|
parent: self.parent,
|
2018-03-07 21:36:15 +08:00
|
|
|
data: {
|
|
|
|
comProps: props,
|
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
mounted() {
|
2018-03-05 22:50:25 +08:00
|
|
|
this.$nextTick(() => {
|
2018-03-05 19:05:23 +08:00
|
|
|
if (ready) {
|
2019-01-12 11:33:27 +08:00
|
|
|
ready.call(self);
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-03-05 19:05:23 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
updated() {
|
2018-05-30 14:11:36 +08:00
|
|
|
this.$nextTick(() => {
|
|
|
|
if (ready) {
|
2019-01-12 11:33:27 +08:00
|
|
|
ready.call(self);
|
2018-05-30 14:11:36 +08:00
|
|
|
}
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-05-30 14:11:36 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
|
|
|
return self.getComponent(this.comProps);
|
2018-03-05 19:05:23 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-03-07 21:36:15 +08:00
|
|
|
} else {
|
2019-01-12 11:33:27 +08:00
|
|
|
this._component.comProps = props;
|
2018-03-05 19:05:23 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2019-01-12 11:33:27 +08:00
|
|
|
render() {
|
2018-03-05 19:05:23 +08:00
|
|
|
return this.children({
|
|
|
|
renderComponent: this.renderComponent,
|
|
|
|
removeContainer: this.removeContainer,
|
2019-01-12 11:33:27 +08:00
|
|
|
});
|
2018-03-05 19:05:23 +08:00
|
|
|
},
|
2019-01-12 11:33:27 +08:00
|
|
|
};
|