🍻 测试性弹窗 - 勿用

src/components/_dialog_dont_use_just_test/children/modal-put-book-add.vue

@@ -0,0 +1,19 @@
+<template>
+  <input type="text"
+         :value="msg" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+const ModalPutBookAdd = defineComponent({
+  props: {
+    msg: {
+      type: String,
+      default: "123",
+    },
+  },
+});
+
+export default ModalPutBookAdd;
+</script>

src/components/_dialog_dont_use_just_test/dialog.d.ts

@@ -0,0 +1,10 @@
+import { Component, VNode } from "vue";
+
+declare interface IDialogConfig {
+  title: string;
+  width?: string | number;
+  content: string | VNode | Component;
+  closeOnClickMask?: boolean;
+  destroyOnClose?: boolean;
+  [key: string]: any;
+}

src/components/_dialog_dont_use_just_test/index.ts

@@ -0,0 +1,41 @@
+import { createVNode, defineComponent, render } from "vue";
+
+import ModalConstructor from "./index.vue";
+import { IDialogConfig } from "./dialog";
+
+// NOTE: 开发环境下会报错 和devTools有关 正式环境无问题
+// TODO: 子组件数据响应式问题
+const Modal = (options: Partial<IDialogConfig> = {}): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const _config: Partial<IDialogConfig> = Object.assign(
+      {
+        show: true,
+        width: 520,
+        destroyOnClose: false,
+        closeOnClickMask: false,
+        closed: () => {
+          document.body.removeChild(container);
+        },
+        confirm: () => {
+          resolve();
+        },
+        cancel: () => {
+          // console.log("cancel");
+          // reject();
+        },
+      },
+      options
+    );
+
+    const vm = createVNode(ModalConstructor, _config, {
+      default: () => options.content ?? "",
+    });
+
+    render(vm, container);
+  });
+};
+
+export default Modal;

src/components/_dialog_dont_use_just_test/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <a-modal v-model:visible="visible"
+           :width="width"
+           :title="title"
+           :afterClose="closed"
+           :destroyOnClose="destroyOnClose"
+           :maskClosable="closeOnClickMask"
+           :get-container="getContainer"
+           @cancel="cancel"
+           @ok="sure">
+    {{content}}
+    <slot />
+  </a-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect } from "vue";
+import { Modal as AModal } from "ant-design-vue";
+
+const ModalIndex = defineComponent({
+  components: {
+    AModal,
+  },
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    destroyOnClose: {
+      type: Boolean,
+      default: false,
+    },
+    closeOnClickMask: {
+      type: Boolean,
+      default: false,
+    },
+    content: String,
+    width: [String, Number],
+    title: String,
+    getContainer: Function,
+    closed: Function,
+    cancel: Function,
+    confirm: Function,
+  },
+  setup(props) {
+    let visible = ref(props.show);
+
+    watchEffect(() => (visible.value = props.show));
+
+    return { visible };
+  },
+  methods: {
+    sure() {
+      this.visible = false;
+      console.log(this.$slots.default!());
+      this.confirm!();
+    },
+  },
+});
+
+export default ModalIndex;
+</script>

src/plugins/install.ts

@@ -34,7 +34,8 @@ const install = (app: App<Element>) => {
     .use(Select)
     .use(DatePicker)
     .use(Table)
-    .use(Popover);
+    .use(Popover)
+    .use(Modal);
 };
 
 export default install;