基于Ant-design-vue的Modal弹窗 封装 命令式与Hooks用法

<template>
  <Modal v-model:visible="visible" title="弹窗"> ...content </Modal>
  <Button type="primary" @click="visible = true">打开弹窗</Button>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { Modal, Button } from "ant-design-vue";
export default defineComponent({
  components: {
    Modal,
    Button,
  },
  setup() {
    const visible = ref(false);
    return { visible };
  },
});
</script>

<template>
  <Modal v-model:visible="editVisible" title="弹窗">
    <Form>
      <FormItem label="名称">
        <Input v-memo="editFormData.name" placeholder="请输入" />
      </FormItem>
    </Form>
  </Modal>
  <Button type="primary" @click="editVisible = true">修改数据</Button>
  <Modal v-model:visible="detailVisible" title="弹窗"> ...detailContent </Modal>
  <Button type="primary" @click="detailVisible = true">查看详情</Button>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { Modal, Button, Form, FormItem, Input } from "ant-design-vue";
export default defineComponent({
  components: {
    Modal,
    Button,
    Form,
    FormItem,
    Input,
  },
  setup() {
    const editVisible = ref(false);
    const detailVisible = ref(false);
    const editFormData = reactive({ name: "" });
    return { editVisible, detailVisible, editFormData };
  },
});
</script>

<template>
  <Button @click="openAModal"></Button>
</template>
<script>
import { Button } from "ant-design-vue";
import openAModal from "./openAModal";
export default defineComponent({
  components: {
    Button,
  },
  setup() {
    return {
      openAModal,
    };
  },
});
</script>

// modal.js
import { createVNode, render as vueRender } from "vue";
import { Modal as AntModal } from "ant-design-vue";
/**
 * @param {import("vue").DefineComponent} content
 * @param {import("vue").Prop} props
 * @param {Omit<import("ant-design-vue").ModalProps, 'visible'>} config
 */
export default function modal(content, props, config) {
  const container = document.createDocumentFragment();
  const _contentVnode = createVNode(content, props);
  const metadata = Object.create({
    okText: "确定",
    cancelText: "取消",
    visible: true,
    ...config,
  });
  metadata.onCancel = async function (...arg) {
    await config.onCancel?.(...arg);
    close();
  };
  metadata.onOk = async function () {
    if (!(config.onOk instanceof Function)) {
      close();
      return;
    }
    const result = config.onOk();
    if (!(result instanceof Promise)) {
      close();
      return;
    }
    update({ confirmLoading: true });
    return result
      .then(() => {
        update({ confirmLoading: false });
        close();
      })
      .catch(() => {
        update({ confirmLoading: false });
      });
  };
  let vm = createVNode(AntModal, metadata, () => _contentVnode);
  /**
   *
   * @param {typeof config} config
   */
  function update(config) {
    Object.assign(vm.component.props, config);
    vm.component.update();
  }
  function close() {
    metadata.visible = false;
    update(metadata);
  }
  function destroy() {
    if (vm) {
      vueRender(null, container);
      vm = null;
    }
  }
  /** 渲染 */
  vueRender(vm, container);
  return {
    ..._contentVnode,
    close,
    destroy,
    update,
  };
}

// A.vue
<template>
  <h1>我是A组件</h1>
  <div>{{ title }}</div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    title: {
      type: String,
      default: "",
    },
  },
});
</script>

// openAModal.js
import A from './A.vue'
import modal from './modal.js'
export default function openAModal() {
    modal(A, {title: 'A组件的props'}, {...弹窗的配置项})
}

<template>
  <component :is="contextHolder" />
  <Button @click="openAModal">打开弹窗</Button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Button } from "ant-design-vue";
import useModal from "./useModal.js";
import A from "./A.vue";
export default defineComponent({
  components: {
    Button,
  },
  setup() {
    const [modal, contextHolder] = useModal({ title: "弹窗", content: A });
    return {
      openAModal: modal.show,
      contextHolder,
    };
  },
});
</script>

// useModal
import { createVNode, ref, defineComponent } from "vue";
import { Modal as AntModal } from "ant-design-vue";
/**
 * @typedef {ReturnType<typeof defineComponent>} Component
 * @typedef {Omit<import("ant-design-vue").ModalProps, 'visible'>} ModalProps
 * @param {Omit<import("ant-design-vue").ModalProps, 'visible'> & {content: Component}} props
 *
 * @returns {[{show:() => void}, Component]}
 */
export default function useModal(props = {}) {
  const visible = ref(false);
  // 定义需要渲染的组件即Modal
  const contextHolder = defineComponent({
    render() {
      return createVNode(AntModal, { ...props, visible: visible.value }, () =>
        createVNode(props.content)
      );
    },
  });
  const show = () => {
    visible.value = true;
  };
  return [{ show }, contextHolder];
}
}