chore: popup plugin docs

Tencent · Mar 9, 2023 · 3505812 · 3505812
1 parent 8df3002
commit 3505812
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 1 deletion.
diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md
@@ -35,3 +35,13 @@ name | params | description
 scroll | `(context: { e: WheelEvent })` | \-
 scroll-to-bottom | `(context: { e: WheelEvent })` | \-
 visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。<br/>`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`<br/><br/>`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`<br/><br/>`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`<br/>
+
+### PopupPlugin
+
+support `this.$popup`
+
+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
diff --git a/src/popup/popup.md b/src/popup/popup.md
@@ -43,3 +43,13 @@ onVisibleChange | Function |  | TS 类型：`(visible: boolean, context: PopupVi
 scroll | `(context: { e: WheelEvent })` | 下拉选项滚动事件
 scroll-to-bottom | `(context: { e: WheelEvent })` | 下拉滚动触底事件，常用于滚动到底执行具体业务逻辑
 visible-change | `(visible: boolean, context: PopupVisibleChangeContext)` | 当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts)。<br/>`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`<br/><br/>`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`<br/><br/>`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`<br/>
+
+### PopupPlugin
+
+同时也支持 `this.$popup`。
+
+参数名称 | 参数类型 | 参数默认值 | 参数说明
+-- | -- | -- | --
+content | String / Slot / Function | - | 必需。气泡框的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)
+popupProps | Object | - | 透传气泡框/浮层的属性
+triggerElement | String | - | 必需。触发气泡框/浮层的元素，传入选择器即可
diff --git a/src/popup/props.ts b/src/popup/props.ts
@@ -49,7 +49,7 @@ export default {
   },
   /** 浮层出现位置 */
   placement: {
-    type: String,
+    type: String as PropType<TdPopupProps['placement']>,
     default: 'top',
   },
   /** popper 初始化配置，详情参考 https://popper.js.org/docs/ */

diff --git a/src/popup/type.ts b/src/popup/type.ts
@@ -6,6 +6,8 @@
 
 import { TNode, ClassName, Styles, AttachNode } from '../common';
 
+export type PopupMethod = (triggerElement: string, content: string | TNode, popupProps?: object) => void;
+
 export interface TdPopupProps {
   /**
    * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body