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'