fix(Popover): 使用 v-show 而不是 v-if

Signed-off-by: Tenny <joel.shu@qq.com>

Author: Tenny

docs/components/dialog.md

@@ -6,11 +6,13 @@
 
 <script setup>
   import { ref } from 'vue'
-  import { Dialog } from "../../src"
+  import { Dialog, AlertDialog } from "../../src"
 
-  const show = ref(true)
+  const show = ref(false)
 </script>
 
+<AlertDialog></AlertDialog>
+
 ### 基础用法
 
 基础用法

src/components/dialog/AlertDialog.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>Vue3 Composition Component <CloseIcon></CloseIcon></div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue';
+
+const CloseIcon = defineAsyncComponent(() => import('../icon/Close.vue'));
+const ErrorIcon = defineAsyncComponent(() => import('../icon/Success.vue'));
+</script>
+
+<style></style>

src/components/Dialog.vue renamed to src/components/dialog/Dialog.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
 import { defineComponent, watch, h, Teleport, Transition } from 'vue';
 import type { PropType } from 'vue';
-import Shadow from './Shadow.vue';
-import Button from './Button.vue';
-import CloseIcon from './icon/Close.vue';
+import Shadow from '../Shadow.vue';
+import Button from '../Button.vue';
+import CloseIcon from '../icon/Close.vue';
 
 export default defineComponent({
   props: {

src/components/popover/Popover.vue

@@ -10,6 +10,7 @@ import {
   withDirectives,
   onMounted,
   watch,
+  vShow,
 } from 'vue';
 import { popoverProps } from './constant';
 import Clickoutside from '../../directives/clickoutside';
@@ -285,30 +286,31 @@ export default defineComponent({
             { name: 'nt-opacity' },
             {
               default: () =>
-                show.value
-                  ? h(
-                      'div',
-                      {
-                        ...attrs,
-                        class: [
-                          'nt-popover',
-                          `nt-popover-${place.value}`,
-                          attrs.class,
-                        ],
-                        style: [attrs.style, posStyle.value],
-                        ref: $popover,
-                        ...prop,
-                      },
-                      [
-                        slots.default != null
-                          ? slots.default()
-                          : props.content != null
-                            ? h('span', props.content)
-                            : null,
-                        h('span', { class: 'nt-popover-arrow' }),
+                withDirectives(
+                  h(
+                    'div',
+                    {
+                      ...attrs,
+                      class: [
+                        'nt-popover',
+                        `nt-popover-${place.value}`,
+                        attrs.class,
                       ],
-                    )
-                  : null,
+                      style: [attrs.style, posStyle.value],
+                      ref: $popover,
+                      ...prop,
+                    },
+                    [
+                      slots.default != null
+                        ? slots.default()
+                        : props.content != null
+                          ? h('span', props.content)
+                          : null,
+                      h('span', { class: 'nt-popover-arrow' }),
+                    ],
+                  ),
+                  [[vShow, show.value]],
+                ),
             },
           ),
         ),

src/index.ts

@@ -39,6 +39,8 @@ export { default as Card } from './components/Card.vue';
 
 export { default as Popover } from './components/popover/Popover.vue';
 export { default as Tooltip } from './components/popover/Tooltip.vue';
+export { default as Dialog } from './components/dialog/Dialog.vue';
+export { default as AlertDialog } from './components/dialog/AlertDialog.vue';
 
 export { default as Qrcode } from './components/Qrcode.vue';
 
@@ -53,7 +55,6 @@ export { default as DescriptionPanel } from './components/DescriptionPanel.vue';
 export { default as Tabbar } from './components/tabbar/Tabbar.vue';
 export { default as TabbarItem } from './components/tabbar/TabbarItem.vue';
 export { default as List } from './components/List.vue';
-export { default as Dialog } from './components/Dialog.vue';
 
 export { default as Clickoutside } from './directives/clickoutside';
 export { default as Loading } from './directives/loading';