feat(popup): add multiple instance methods to popup component

src/popup/popup.en-US.md

@@ -47,4 +47,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
+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)。<br/>`import { Instance } from '@popperjs/core'`<br/>
+update | \- | \- | used to update overlay content

src/popup/popup.md

@@ -53,8 +53,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 | - | 必需。触发气泡框/浮层的元素，传入选择器即可
+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)。<br/>`import { Instance } from '@popperjs/core'`<br/>
+update | \- | \- | 更新浮层内容

src/popup/popup.tsx

@@ -1,5 +1,5 @@
-import { PropType, VNodeDirective } from 'vue';
-import { createPopper } from '@popperjs/core';
+import { VNodeDirective } from 'vue';
+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';
@@ -43,7 +43,7 @@
      * 可以是 HTMLElement 或者 ref 名称字符串 (如 'overlay')
      */
     popperContentElement: {
       type: [String, Object] as PropType<string | HTMLElement>,
     },
     expandAnimation: {
       type: Boolean,
@@ -56,7 +56,7 @@
   data() {
     return {
       /** popperjs instance */
-      popper: null as ReturnType<typeof createPopper>,
+      popper: null as PopperInstance,
       /** timeout id */
       timeout: null,
       hasDocumentEvent: false,
@@ -67,6 +67,8 @@
       contentClicked: false,
       /** is popup leaving */
       isLeaving: false,
+      /** is overlay hover */
+      isOverlayHover: false,
     };
   },
   computed: {
@@ -205,7 +207,7 @@
       if (typeof this.popperContentElement === 'string') {
         popperEl = this.$refs[this.popperContentElement] as HTMLElement;
       } else {
         popperEl = this.popperContentElement || (this.$refs.popper as HTMLElement);
       }
 
       if (!popperEl || !this.visible) return;
@@ -244,6 +246,27 @@
         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;
@@ -347,6 +370,7 @@
       }
     },
     onMouseEnter() {
+      this.isOverlayHover = true;
       if (this.destroyOnClose && this.isLeaving) {
         // 如果 popup 在关闭的时候会被销毁，那在它消失的过程中，不响应鼠标进入事件，因为否则不会触发 mouseleave
         return;
@@ -355,6 +379,7 @@
       this.handleOpen({});
     },
     onMouseLeave(ev: MouseEvent) {
+      this.isOverlayHover = false;
       // 子元素存在打开的 popup 时，ui 可能重叠，而 dom 节点多是并列关系
       // 需要做碰撞检测去阻止父级 popup 关闭
       if (this.visibleState > 1) {

src/popup/type.ts

@@ -4,6 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { Instance } from '@popperjs/core';
 import { TNode, ClassName, Styles, AttachNode } from '../common';
 
 export interface TdPopupProps {
@@ -107,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'