diff --git a/packages/components/popup/popup.en-US.md b/packages/components/popup/popup.en-US.md
index 4e253ac12b..4cce5f41ee 100644
--- a/packages/components/popup/popup.en-US.md
+++ b/packages/components/popup/popup.en-US.md
@@ -1,6 +1,7 @@
:: BASE_DOC ::
## API
+
### Popup Props
name | type | default | description | required
@@ -41,6 +42,7 @@ visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see
name | params | return | description
-- | -- | -- | --
-getOverlay | \- | `HTMLElement` | used to get overly html element
+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-next/blob/develop/packages/components/popup/type.ts)。
`import { Instance } from '@popperjs/core'`
update | \- | \- | used to update overlay content
diff --git a/packages/components/popup/popup.md b/packages/components/popup/popup.md
index fe89a68e82..8771597a33 100644
--- a/packages/components/popup/popup.md
+++ b/packages/components/popup/popup.md
@@ -37,11 +37,12 @@
如果您不确定问题是否是由该规则引起的,或者确定该规则不是问题的根本原因,请在 `GitHub` 上提出一个 `issue`,并提供可以重现问题的代码。这将有助于我们更好地了解您的问题并提供更好的帮助。
## API
+
### Popup Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
+attach | String / Function | 'body' | 指定挂载节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body。TS 类型:`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
content | String / Slot / Function | - | 浮层里面的内容。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
default | String / Slot / Function | - | 触发元素,同 triggerElement。TS 类型:`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N
delay | Number / Array | - | 延时显示或隐藏浮层,[延迟显示的时间,延迟隐藏的时间],单位:毫秒。如果只有一个时间,则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为:[250, 150]。TS 类型:`number \| Array` | N
@@ -77,6 +78,7 @@ visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当
名称 | 参数 | 返回值 | 描述
-- | -- | -- | --
-getOverlay | \- | `HTMLElement` | 获取浮层元素
+getOverlay | \- | `HTMLElement \| null` | 获取浮层元素
getOverlayState | \- | `{ hover: boolean }` | 获取浮层悬浮状态
+getPopper | \- | `Instance \| null` | 获取当前组件 popper 实例。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/popup/type.ts)。
`import { Instance } from '@popperjs/core'`
update | \- | \- | 更新浮层内容
diff --git a/packages/components/popup/popup.tsx b/packages/components/popup/popup.tsx
index c0c1091ead..2e3a85c629 100644
--- a/packages/components/popup/popup.tsx
+++ b/packages/components/popup/popup.tsx
@@ -249,6 +249,7 @@ export default defineComponent({
getOverlayState: () => ({
hover: isOverlayHover.value,
}),
+ getPopper: () => popper,
/** close is going to be deprecated. visible is enough */
close: () => hide(),
});
diff --git a/packages/components/popup/props.ts b/packages/components/popup/props.ts
index 735ac63703..63fd2b7c12 100644
--- a/packages/components/popup/props.ts
+++ b/packages/components/popup/props.ts
@@ -8,7 +8,7 @@ import { TdPopupProps } from './type';
import { PropType } from 'vue';
export default {
- /** 制定挂载节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body */
+ /** 指定挂载节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body */
attach: {
type: [String, Function] as PropType,
default: 'body' as TdPopupProps['attach'],
diff --git a/packages/components/popup/type.ts b/packages/components/popup/type.ts
index 5416bf4f17..5d48cdd6bc 100644
--- a/packages/components/popup/type.ts
+++ b/packages/components/popup/type.ts
@@ -4,11 +4,12 @@
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
* */
+import { Instance } from '@popperjs/core';
import { TNode, ClassName, Styles, AttachNode } from '../common';
export interface TdPopupProps {
/**
- * 制定挂载节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body
+ * 指定挂载节点。数据类型为 String 时,会被当作选择器处理,进行节点查询。示例:'body' 或 () => document.body
* @default 'body'
*/
attach?: AttachNode;
@@ -116,11 +117,15 @@ export interface PopupInstanceFunctions {
/**
* 获取浮层元素
*/
- getOverlay?: () => HTMLElement;
+ getOverlay?: () => HTMLElement | null;
/**
* 获取浮层悬浮状态
*/
getOverlayState?: () => { hover: boolean };
+ /**
+ * 获取当前组件 popper 实例
+ */
+ getPopper?: () => Instance | null;
/**
* 更新浮层内容
*/
diff --git a/packages/tdesign-vue-next/.changelog/pr-6096.md b/packages/tdesign-vue-next/.changelog/pr-6096.md
new file mode 100644
index 0000000000..90943499ec
--- /dev/null
+++ b/packages/tdesign-vue-next/.changelog/pr-6096.md
@@ -0,0 +1,6 @@
+---
+pr_number: 6096
+contributor: RSS1102
+---
+
+- feat(popup): 新增 `getPopper()` 方法,将返回 popper 实例,用于基于 popper 进行动态操作的场景 @RSS1102 ([#6096](https://github.com/Tencent/tdesign-vue-next/pull/6096))