diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 42d9ce5e16..72ac3ffdf9 100644 --- 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)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
+ +### PopupPlugin + +同时也支持 `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 index 428b8a9f65..c00a5678be 100644 --- 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)。
`interface PopupVisibleChangeContext { e?: PopupTriggerEvent; trigger?: PopupTriggerSource }`

`type PopupTriggerEvent = MouseEvent \| FocusEvent \| KeyboardEvent`

`type PopupTriggerSource = 'document' \| 'trigger-element-click' \| 'trigger-element-hover' \| 'trigger-element-blur' \| 'trigger-element-focus' \| 'trigger-element-mousedown' \| 'context-menu' \| 'keydown-esc'`
+ +### 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 index 011bf5e5f3..085df65aac 100644 --- a/src/popup/props.ts +++ b/src/popup/props.ts @@ -49,7 +49,7 @@ export default { }, /** 浮层出现位置 */ placement: { - type: String, + type: String as PropType, default: 'top', }, /** popper 初始化配置,详情参考 https://popper.js.org/docs/ */ diff --git a/src/popup/type.ts b/src/popup/type.ts index 75050ddab3..5b883a1758 100644 --- 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