feat(popup): support duration

Tencent · Jan 22, 2025 · 85b05ba · 85b05ba
1 parent b3acb1a
commit 85b05ba
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 7 deletions.
diff --git a/src/dropdown-menu/dropdown-item.tsx b/src/dropdown-menu/dropdown-item.tsx
@@ -18,7 +18,6 @@ const getUniqueID = uniqueFactory('dropdown-popup');
 
 export default defineComponent({
   name: `${prefix}-dropdown-item`,
-  components: { TPopup },
   props,
   emits: ['change', 'open', 'opened', 'close', 'closed', 'update:value', 'update:modelValue'],
   setup(props) {
@@ -286,10 +285,10 @@ export default defineComponent({
       return (
         wrapperVisible.value && (
           <div id={popupId} class={classes.value} style={{ ...expandStyle.value }}>
-            <t-popup
+            <TPopup
               visible={isShowItems.value}
               placement={menuProps.direction === 'up' ? 'bottom' : 'top'}
-              duration={duration.value}
+              duration={Number(duration.value)}
               showOverlay={showOverlay.value}
               style={popupStyle.value}
               overlayProps={{ style: 'position: absolute' }}
@@ -300,7 +299,7 @@ export default defineComponent({
                 <div class={`${dropdownItemClass.value}__body`}>{content || defaultSlot()}</div>
                 {footer || footerSlot()}
               </div>
-            </t-popup>
+            </TPopup>
           </div>
         )
       );

diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md
@@ -10,6 +10,7 @@ attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts d
 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
+duration | Number | 240 | \- | N
 overlayProps | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/popup/type.ts) | N
 placement | String | top | options: top/left/right/bottom/center | N
 preventScrollThrough | Boolean | true | \- | N
@@ -41,4 +42,4 @@ Name | Default Value | Description
 -- | -- | --
 --td-popup-bg-color | @bg-color-container | - 
 --td-popup-border-radius | @radius-extra-large | - 
---td-popup-close-btn-color | @text-color-primary | - 
+--td-popup-close-btn-color | @text-color-primary | -
diff --git a/src/popup/popup.md b/src/popup/popup.md
@@ -10,6 +10,7 @@ attach | String / Function | 'body' | 指定挂载节点。数据类型为 Strin
 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
+duration | Number | 240 | 动画过渡时间 | N
 overlayProps | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/popup/type.ts) | N
 placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
 preventScrollThrough | Boolean | true | 是否阻止背景滚动 | N
@@ -41,4 +42,4 @@ visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏
 -- | -- | --
 --td-popup-bg-color | @bg-color-container | - 
 --td-popup-border-radius | @radius-extra-large | - 
---td-popup-close-btn-color | @text-color-primary | - 
+--td-popup-close-btn-color | @text-color-primary | -
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
@@ -128,7 +128,12 @@ export default defineComponent({
       );
 
       const renderContent = (
-        <Transition name={contentTransitionName.value} onAfterEnter={afterEnter} onAfterLeave={afterLeave}>
+        <Transition
+          name={contentTransitionName.value}
+          duration={props.duration}
+          onAfterEnter={afterEnter}
+          onAfterLeave={afterLeave}
+        >
           <div
             v-show={innerVisible.value}
             ref={popupRef}

diff --git a/src/popup/props.ts b/src/popup/props.ts
@@ -24,6 +24,11 @@ export default {
   },
   /** 是否在关闭浮层时销毁浮层 */
   destroyOnClose: Boolean,
+  /** 动画过渡时间 */
+  duration: {
+    type: Number,
+    default: 240,
+  },
   /** 遮罩层的属性，透传至 overlay */
   overlayProps: {
     type: Object as PropType<TdPopupProps['overlayProps']>,

diff --git a/src/popup/type.ts b/src/popup/type.ts
@@ -27,6 +27,11 @@ export interface TdPopupProps {
    * @default false
    */
   destroyOnClose?: boolean;
+  /**
+   * 动画过渡时间
+   * @default 240
+   */
+  duration?: number;
   /**
    * 遮罩层的属性，透传至 overlay
    * @default {}