ant-design-vue/components/_util/Portal.js

49 lines
995 B
JavaScript
Raw Normal View History

2020-05-13 18:36:53 +08:00
import PropTypes from './vue-types';
2020-06-10 18:21:16 +08:00
import { Teleport } from 'vue';
2020-05-13 18:36:53 +08:00
export default {
name: 'Portal',
props: {
getContainer: PropTypes.func.isRequired,
children: PropTypes.any.isRequired,
didUpdate: PropTypes.func,
},
2020-06-10 18:21:16 +08:00
data() {
this._container = null;
return {};
},
2020-05-13 18:36:53 +08:00
mounted() {
this.createContainer();
},
updated() {
const { didUpdate } = this.$props;
if (didUpdate) {
this.$nextTick(() => {
didUpdate(this.$props);
});
}
},
2020-06-11 16:13:09 +08:00
beforeUnmount() {
2020-05-13 18:36:53 +08:00
this.removeContainer();
},
methods: {
createContainer() {
this._container = this.$props.getContainer();
this.$forceUpdate();
},
removeContainer() {
if (this._container && this._container.parentNode) {
2020-05-13 18:36:53 +08:00
this._container.parentNode.removeChild(this._container);
}
},
},
render() {
if (this._container) {
2020-06-10 18:21:16 +08:00
return <Teleport to={this._container}>{this.$props.children}</Teleport>;
2020-05-13 18:36:53 +08:00
}
return null;
},
};