diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 0155888d1..01aa55b8b 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -45,4 +45,13 @@ name | params | default | description -- | -- | -- | -- content | String / Slot / Function | - | required。Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) popupProps | Object | - | \- -triggerElement | String | - | required \ No newline at end of file +triggerElement | String | - | required + +### PopupInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +getOverlay | \- | `HTMLElement \| null` | used to get overly html element +getOverlayState | \- | `{ hover: boolean }` | get mouseover state of overlay +getPopper | \- | `Instance \| null` | get the popup component popper instance。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`import { Instance } from '@popperjs/core'`
+update | \- | \- | used to update overlay content diff --git a/src/popup/popup.md b/src/popup/popup.md index 200d3e6c9..027aee635 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -51,8 +51,17 @@ visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当 同时也支持 `this.$popup`。 -参数名称 | 参数类型 | 参数默认值 | 参数说明 +名称 | 参数 | 返回值 | 描述 -- | -- | -- | -- content | String / Slot / Function | - | 必需。气泡框的内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) popupProps | Object | - | 透传气泡框/浮层的属性 -triggerElement | String | - | 必需。触发气泡框/浮层的元素,传入选择器即可 \ No newline at end of file +triggerElement | String | - | 必需。触发气泡框/浮层的元素,传入选择器即可 + +### PopupInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +getOverlay | \- | `HTMLElement \| null` | 获取浮层元素 +getOverlayState | \- | `{ hover: boolean }` | 获取浮层悬浮状态 +getPopper | \- | `Instance \| null` | 获取当前组件 popper 实例。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。
`import { Instance } from '@popperjs/core'`
+update | \- | \- | 更新浮层内容 diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx index 7e5ef5ee7..1623e7195 100644 --- a/src/popup/popup.tsx +++ b/src/popup/popup.tsx @@ -1,5 +1,5 @@ import { VNodeDirective } from 'vue'; -import { createPopper } from '@popperjs/core'; +import { createPopper, Instance as PopperInstance } from '@popperjs/core'; import { debounce } from 'lodash-es'; import { on, off, once } from '../utils/dom'; import { renderTNodeJSX, renderContent } from '../utils/render-tnode'; @@ -49,7 +49,7 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend( data() { return { /** popperjs instance */ - popper: null as ReturnType, + popper: null as PopperInstance, /** timeout id */ timeout: null, hasDocumentEvent: false, @@ -60,6 +60,8 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend( contentClicked: false, /** is popup leaving */ isLeaving: false, + /** is overlay hover */ + isOverlayHover: false, }; }, computed: { @@ -231,6 +233,27 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend( this.updateScrollTop?.(overlayEl); } }, + // PopupInstanceFunctions: 获取浮层元素 + getOverlay(): HTMLElement | null { + const overlayEl = this.$refs?.overlay as HTMLElement; + return overlayEl; + }, + + // PopupInstanceFunctions: 获取浮层悬浮状态 + getOverlayState(): { hover: boolean } { + return { hover: this.isOverlayHover }; + }, + + // PopupInstanceFunctions: 获取 Popper 实例 + getPopper(): PopperInstance | null { + return this.popper; + }, + + // PopupInstanceFunctions: 更新浮层内容 + update() { + this.updatePopper(); + }, + getOverlayStyle() { const { overlayStyle } = this; const triggerEl = this.$el as HTMLElement; @@ -334,6 +357,7 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend( } }, onMouseEnter() { + this.isOverlayHover = true; if (this.destroyOnClose && this.isLeaving) { // 如果 popup 在关闭的时候会被销毁,那在它消失的过程中,不响应鼠标进入事件,因为否则不会触发 mouseleave return; @@ -342,6 +366,7 @@ export default mixins(classPrefixMixins, getAttachConfigMixins('popup')).extend( this.handleOpen({}); }, onMouseLeave(ev: MouseEvent) { + this.isOverlayHover = false; // 子元素存在打开的 popup 时,ui 可能重叠,而 dom 节点多是并列关系 // 需要做碰撞检测去阻止父级 popup 关闭 if (this.visibleState > 1) { diff --git a/src/popup/type.ts b/src/popup/type.ts index ea190d68f..8b3817b9d 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -4,6 +4,7 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ +import { Instance } from '@popperjs/core'; import { TNode, ClassName, Styles, AttachNode } from '../common'; export interface TdPopupProps { @@ -89,6 +90,10 @@ export interface TdPopupProps { * 组件层级,Web 侧样式默认为 5500,移动端和小程序样式默认为 1500 */ zIndex?: number; + /** + * 内容面板点击时触发 + */ + onOverlayClick?: (context: { e: MouseEvent }) => void; /** * 下拉选项滚动事件 */ @@ -103,6 +108,26 @@ export interface TdPopupProps { onVisibleChange?: (visible: boolean, context: PopupVisibleChangeContext) => void; } +/** 组件实例方法 */ +export interface PopupInstanceFunctions { + /** + * 获取浮层元素 + */ + getOverlay?: () => HTMLElement | null; + /** + * 获取浮层悬浮状态 + */ + getOverlayState?: () => { hover: boolean }; + /** + * 获取当前组件 popper 实例 + */ + getPopper?: () => Instance | null; + /** + * 更新浮层内容 + */ + update?: () => void; +} + export type PopupPlacement = | 'top' | 'left'