diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 3777fb63c..370e46bbe 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -8,10 +8,12 @@ name | type | default | description | required attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N content | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string | TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +delay | Number / Array | - | delay to show or hide popover。Typescript：`number | Array` | N destroyOnClose | Boolean | false | \- | N disabled | Boolean | false | \- | N hideEmptyPopup | Boolean | false | \- | N overlayClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayInnerClassName | String / Object / Array | - | Typescript：`ClassName`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N overlayInnerStyle | Boolean / Object / Function | - | Typescript：`Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N overlayStyle | Boolean / Object / Function | - | Typescript：`Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placement | String | top | Typescript：`PopupPlacement` `type PopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N diff --git a/src/popup/popup.md b/src/popup/popup.md index dcde5669a..2ee65fbbc 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -8,10 +8,12 @@ attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N content | String / Slot / Function | - | 浮层里面的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 触发元素，同 triggerElement。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +delay | Number / Array | - | 延时显示或隐藏覆层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]。TS 类型：`number | Array` | N destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N disabled | Boolean | false | 是否禁用组件 | N hideEmptyPopup | Boolean | false | 浮层是否隐藏空内容，默认不隐藏 | N overlayClassName | String / Object / Array | - | 浮层类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +overlayInnerClassName | String / Object / Array | - | 浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]`。TS 类型：`ClassName`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N overlayInnerStyle | Boolean / Object / Function | - | 浮层内容部分样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点。TS 类型：`Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N overlayStyle | Boolean / Object / Function | - | 浮层样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点。TS 类型：`Styles | ((triggerElement: HTMLElement, popupElement: HTMLElement) => Styles)`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N placement | String | top | 浮层出现位置。TS 类型：`PopupPlacement` `type PopupPlacement = 'top'|'left'|'right'|'bottom'|'top-left'|'top-right'|'bottom-left'|'bottom-right'|'left-top'|'left-bottom'|'right-top'|'right-bottom'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx index da0ce3488..57e5fddcb 100644 --- a/src/popup/popup.tsx +++ b/src/popup/popup.tsx @@ -12,8 +12,6 @@ import mixins from '../utils/mixins'; const classPrefixMixins = getClassPrefixMixins('popup'); -const showTimeout = 250; -const hideTimeout = 150; const triggers = ['click', 'hover', 'focus', 'context-menu'] as const; const injectionKey = '__T_POPUP'; @@ -97,6 +95,13 @@ export default mixins(classPrefixMixins).extend({ {} as any, ); }, + normalizedDelay(): { open: number; close: number } { + const delay = [].concat(this.delay ?? [250, 150]); + return { + open: delay[0], + close: delay[1] ?? delay[0], + }; + }, }, watch: { visible(visible) { @@ -177,9 +182,12 @@ export default mixins(classPrefixMixins).extend({ (this.$refs.container as any)?.updateContent(); }, beforeDestroy() { - (this as any).popup?.preventClosing(false); + if (this.visible) { + (this as any).popup?.preventClosing(false); + } this.destroyPopper(); off(document, 'click', this.handleDocumentClick, true); + clearTimeout(this.timeout); }, methods: { updatePopper() { @@ -270,7 +278,7 @@ export default mixins(classPrefixMixins).extend({ () => { this.emitPopVisible(true, context); }, - this.hasTrigger.click ? 0 : showTimeout, + this.hasTrigger.click ? 0 : this.normalizedDelay.open, ); }, handleClose(context: Pick) { @@ -279,7 +287,7 @@ export default mixins(classPrefixMixins).extend({ () => { this.emitPopVisible(false, context); }, - this.hasTrigger.click ? 0 : hideTimeout, + this.hasTrigger.click ? 0 : this.normalizedDelay.close, ); }, handleDocumentClick(ev?: MouseEvent) { diff --git a/src/popup/props.ts b/src/popup/props.ts index e04e91c33..40bf4d609 100644 --- a/src/popup/props.ts +++ b/src/popup/props.ts @@ -21,6 +21,10 @@ export default { default: { type: [String, Function] as PropType, }, + /** 延时显示或隐藏覆层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150] */ + delay: { + type: [Number, Array] as PropType, + }, /** 是否在关闭浮层时销毁浮层 */ destroyOnClose: Boolean, /** 是否禁用组件 */ @@ -31,6 +35,10 @@ export default { overlayClassName: { type: [String, Object, Array] as PropType, }, + /** 浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]` */ + overlayInnerClassName: { + type: [String, Object, Array] as PropType, + }, /** 浮层内容部分样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点 */ overlayInnerStyle: { type: [Boolean, Object, Function] as PropType, diff --git a/src/popup/type.ts b/src/popup/type.ts index a57a5d949..297837767 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -20,6 +20,10 @@ export interface TdPopupProps { * 触发元素，同 triggerElement */ default?: string | TNode; + /** + * 延时显示或隐藏覆层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150] + */ + delay?: number | Array; /** * 是否在关闭浮层时销毁浮层 * @default false @@ -39,6 +43,10 @@ export interface TdPopupProps { * 浮层类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]` */ overlayClassName?: ClassName; + /** + * 浮层内容部分类名，示例：'name1 name2 name3' 或 `['name1', 'name2']` 或 `[{ 'name1': true }]` + */ + overlayInnerClassName?: ClassName; /** * 浮层内容部分样式，第一个参数 `triggerElement` 表示触发元素 DOM 节点，第二个参数 `popupElement` 表示浮层元素 DOM 节点 */