fix(popup): add destroy-on-close property

src/popup/popup.en-US.md

@@ -8,6 +8,7 @@ name | type | default | description | required
 attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 closeBtn | Boolean / Slot / Function | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 closeOnOverlayClick | Boolean | true | \- | N
+destroyOnClose | Boolean | false | \- | N
 overlayProps | Object | {} | \- | N
 placement | String | top | options：top/left/right/bottom/center | N
 preventScrollThrough | Boolean | true | \- | N
@@ -16,7 +17,7 @@ transitionName | String | - | \- | N
 visible | Boolean | - | `v-model` and `v-model:visible` is supported。Typescript：`boolean` | N
 defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N
 zIndex | Number | - | \- | N
-onClose | Function |  | Typescript：`() => void`<br/> | N
+onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClosed | Function |  | Typescript：`() => void`<br/> | N
 onOpen | Function |  | Typescript：`() => void`<br/> | N
 onOpened | Function |  | Typescript：`() => void`<br/> | N

src/popup/popup.md

@@ -6,8 +6,9 @@
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-closeBtn | Boolean / Slot / Function | - | 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+closeBtn | Boolean / Slot / Function | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 closeOnOverlayClick | Boolean | true | 点击遮罩层是否关闭 | N
+destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N
 overlayProps | Object | {} | 遮罩层的属性，透传至 overlay | N
 placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
 preventScrollThrough | Boolean | true | 防止滚动穿透 | N

src/popup/popup.vue

@@ -1,9 +1,9 @@
 <template>
-  <teleport :to="to" :disabled="!to">
-    <t-overlay v-bind="overlayProps" :visible="currentVisible && showOverlay" @click="handleOverlayClick" />
+  <teleport v-if="!destroyOnClose || wrapperVisbile" :to="to" :disabled="!to">
+    <t-overlay v-bind="overlayProps" :visible="innerVisible && showOverlay" @click="handleOverlayClick" />
     <transition :name="contentTransitionName" @after-enter="afterEnter" @after-leave="afterLeave">
       <div
-        v-show="currentVisible"
+        v-show="innerVisible"
         :class="[name, $attrs.class, contentClasses]"
         :style="rootStyles"
         @touchmove="handleMove"
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { computed, watch, defineComponent, h, getCurrentInstance } from 'vue';
+import { computed, watch, defineComponent, h, getCurrentInstance, ref, nextTick } from 'vue';
 import { CloseIcon } from 'tdesign-icons-vue-next';
 
 import popupProps from './props';
@@ -46,6 +46,24 @@ export default defineComponent({
       'visible',
       'visible-change',
     );
+    const wrapperVisbile = ref(currentVisible.value);
+    const innerVisible = ref(currentVisible.value);
+
+    // 因为开启 destroyOnClose，会影响 transition 的动画，因此需要前后设置 visible
+    watch(currentVisible, (v) => {
+      if (v) {
+        wrapperVisbile.value = v;
+        if (props.destroyOnClose) {
+          nextTick(() => {
+            innerVisible.value = v;
+          });
+        } else {
+          innerVisible.value = v;
+        }
+      } else {
+        innerVisible.value = v;
+      }
+    });
 
     const rootStyles = computed(() => {
       const styles: Record<string, any> = {};
@@ -94,7 +112,10 @@ export default defineComponent({
       }
     };
 
-    const afterLeave = () => emitEvent('closed');
+    const afterLeave = () => {
+      wrapperVisbile.value = false;
+      emitEvent('closed');
+    };
     const afterEnter = () => emitEvent('opened');
     const to = computed(() => getAttach(props.attach ?? 'body'));
 
@@ -111,6 +132,8 @@ export default defineComponent({
     return {
       name,
       to,
+      wrapperVisbile,
+      innerVisible,
       currentVisible,
       rootStyles,
       contentClasses,

src/popup/props.ts

@@ -13,7 +13,7 @@ export default {
     type: [String, Function] as PropType<TdPopupProps['attach']>,
     default: 'body',
   },
-  /** 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 */
+  /** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 */
   closeBtn: {
     type: [Boolean, Function] as PropType<TdPopupProps['closeBtn']>,
   },
@@ -22,6 +22,8 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 是否在关闭浮层时销毁浮层 */
+  destroyOnClose: Boolean,
   /** 遮罩层的属性，透传至 overlay */
   overlayProps: {
     type: Object as PropType<TdPopupProps['overlayProps']>,

src/popup/type.ts

@@ -13,14 +13,19 @@ export interface TdPopupProps {
    */
   attach?: AttachNode;
   /**
-   * 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮
+   * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮
    */
   closeBtn?: boolean | TNode;
   /**
    * 点击遮罩层是否关闭
    * @default true
    */
   closeOnOverlayClick?: boolean;
+  /**
+   * 是否在关闭浮层时销毁浮层
+   * @default false
+   */
+  destroyOnClose?: boolean;
   /**
    * 遮罩层的属性，透传至 overlay
    * @default {}