ant-design-vue/components/vc-dialog/DialogWrap.vue

<script>
import Dialog from './Dialog'
import ContainerRender from '../_util/ContainerRender'
import getDialogPropTypes from './IDialogPropTypes'
import { getStyle, getClass } from '../_util/props-util'
const IDialogPropTypes = getDialogPropTypes()
const DialogWrap = {
  props: {
    ...IDialogPropTypes,
    visible: IDialogPropTypes.visible.def(false),
  },
  data () {
    this.renderComponent = () => {}

    this.removeContainer = () => {}
    return {}
  },

  beforeDestroy () {
    if (this.visible) {
      this.renderComponent({
        afterClose: this.removeContainer,
        onClose () {
        },
        visible: false,
      })
    } else {
      this.removeContainer()
    }
  },
  methods: {
    getComponent (extra = {}) {
      const { $attrs, $listeners, $props, $slots } = this

      const dialogProps = {
        props: {
          ...$props,
          dialogClass: getClass(this),
          dialogStyle: getStyle(this),
          ...extra,
        },
        attrs: $attrs,
        ref: '_component',
        key: 'dialog',
        on: $listeners,
      }
      return (
        <Dialog {...dialogProps}>{$slots.default}</Dialog>
      )
    },

    getContainer2 () {
      if (this.getContainer) {
        return this.getContainer()
      }
      const container = document.createElement('div')
      document.body.appendChild(container)
      return container
    },
  },

  render () {
    const { visible } = this
    return (
      <ContainerRender
        parent={this}
        visible={visible}
        autoDestroy={false}
        getComponent={this.getComponent}
        getContainer={this.getContainer2}
        children={({ renderComponent, removeContainer }) => {
          this.renderComponent = renderComponent
          this.removeContainer = removeContainer
          return null
        }}
      />
    )
  },
}

export default DialogWrap

</script>