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

95 lines
2.3 KiB
Vue
Raw Normal View History

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