From 70ea2ef8f2fdeff974730d1a6ec2ec73d945bf55 Mon Sep 17 00:00:00 2001
From: Yanbowen <349952469@qq.com>
Date: Fri, 24 Dec 2021 15:23:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E4=BF=AE=E5=A4=8DuseModal?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=BB=E9=A2=98=E8=89=B2=E5=A4=B1=E6=95=88?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/Modal/index.vue | 33 +++++++++++++++++++--------
 src/hooks/common/useModal.ts          |  2 +-
 src/views/component/modal/index.vue   | 21 ++++++++++++++++-
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/components/common/Modal/index.vue b/src/components/common/Modal/index.vue
index 9198e23f..20e2f1ce 100644
--- a/src/components/common/Modal/index.vue
+++ b/src/components/common/Modal/index.vue
@@ -1,20 +1,27 @@
 <template>
-  <NModal
-    v-model:show="show"
-    v-bind="getModalProps"
-    :loading="loading"
-    @positive-click="positiveClick"
-    @negative-click="negativeClick"
-  >
-    {{ isFunction(props.content) ? props.content() : props.content }}
-  </NModal>
+  <app-provider>
+    <n-modal
+      v-model:show="show"
+      v-bind="getModalProps"
+      :loading="loading"
+      @positive-click="positiveClick"
+      @negative-click="negativeClick"
+    >
+      <template v-if="!isVNode(SlotContent)">
+        {{ SlotContent }}
+      </template>
+      <component :is="SlotContent" v-else />
+    </n-modal>
+  </app-provider>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue';
+import { computed, ref, isVNode } from 'vue';
+import type { VNode } from 'vue';
 import { NModal } from 'naive-ui';
 import type { ModalProps } from 'naive-ui';
 import { omit, isFunction } from 'lodash-es';
+import AppProvider from '@/AppProvider.vue';
 
 export interface HookModalProps extends Partial<ModalProps> {
   closeModal?: () => void;
@@ -26,6 +33,12 @@ const props = withDefaults(defineProps<HookModalProps>(), {
 
 /** 重组NModal的props */
 const getModalProps = computed(() => omit(props, ['onPositiveClick', 'onNegativeClick']));
+const SlotContent = computed(() => {
+  if (isFunction(props.content)) {
+    return isVNode(props.content()) ? (props.content() as VNode) : (props.content() as any);
+  }
+  return props.content as string;
+});
 
 const loading = ref(false);
 const show = computed({
diff --git a/src/hooks/common/useModal.ts b/src/hooks/common/useModal.ts
index 09d4fe2a..2f4aea78 100644
--- a/src/hooks/common/useModal.ts
+++ b/src/hooks/common/useModal.ts
@@ -11,7 +11,7 @@ export default function useModal() {
     if (modalInstance) {
       return modalInstance;
     }
-    const container = document.createElement('template');
+    const container = document.createElement('div');
     const VNode = createVNode(Modal);
     VNode.appContext = appContext;
     render(VNode, container);
diff --git a/src/views/component/modal/index.vue b/src/views/component/modal/index.vue
index ef3eecd5..60b3b4ad 100644
--- a/src/views/component/modal/index.vue
+++ b/src/views/component/modal/index.vue
@@ -18,13 +18,19 @@
           <n-button @click="handleShow">来吧</n-button>
         </n-card>
       </n-grid-item>
+      <n-grid-item>
+        <n-card title="渲染一个组件" class="min-h-180px">
+          <n-button @click="handleRender">来吧</n-button>
+        </n-card>
+      </n-grid-item>
     </n-grid>
   </n-card>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, h } from 'vue';
 import { NCard, NGrid, NGridItem, NModal, NButton } from 'naive-ui';
+import { ComponentTable } from '@/views';
 import { useModal } from '@/hooks';
 
 const visible = ref(false);
@@ -49,5 +55,18 @@ function handleShow() {
     negativeText: '算了'
   });
 }
+
+function handleRender() {
+  showModal({
+    title: '渲染个组件试试',
+    content: () => h(ComponentTable),
+    maskClosable: true,
+    preset: 'card',
+    bordered: false,
+    overlayStyle: {
+      width: '600px'
+    }
+  });
+}
 </script>
 <style lang="scss" scoped></style>