From de28dcef15a799fd510d78bd8c6023bf1d71a09f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 25 Dec 2024 21:30:14 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(Popup):=20attach=20=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tdesign-react/src/popup/defaultProps.ts | 1 - .../tdesign-react/src/popup/popup.en-US.md | 16 ++++-- .../products/tdesign-react/src/popup/popup.md | 16 ++++-- .../products/tdesign-react/src/popup/type.ts | 27 +++++++--- .../tdesign-vue-next/src/popup/popup.en-US.md | 17 +++++-- .../tdesign-vue-next/src/popup/popup.md | 17 +++++-- .../tdesign-vue-next/src/popup/props.ts | 9 ++-- .../tdesign-vue-next/src/popup/type.ts | 27 +++++++--- .../tdesign-vue/src/popup/popup.en-US.md | 17 +++++-- .../products/tdesign-vue/src/popup/popup.md | 17 +++++-- .../products/tdesign-vue/src/popup/props.ts | 9 ++-- .../products/tdesign-vue/src/popup/type.ts | 27 +++++++--- packages/scripts/api.json | 49 ++++++++++++++++--- 13 files changed, 194 insertions(+), 55 deletions(-) diff --git a/packages/products/tdesign-react/src/popup/defaultProps.ts b/packages/products/tdesign-react/src/popup/defaultProps.ts index e8e8f2746..338bca344 100644 --- a/packages/products/tdesign-react/src/popup/defaultProps.ts +++ b/packages/products/tdesign-react/src/popup/defaultProps.ts @@ -5,7 +5,6 @@ import { TdPopupProps } from './type'; export const popupDefaultProps: TdPopupProps = { - attach: 'body', destroyOnClose: false, hideEmptyPopup: false, placement: 'top', diff --git a/packages/products/tdesign-react/src/popup/popup.en-US.md b/packages/products/tdesign-react/src/popup/popup.en-US.md index 2c0293ab2..4a8a91277 100644 --- a/packages/products/tdesign-react/src/popup/popup.en-US.md +++ b/packages/products/tdesign-react/src/popup/popup.en-US.md @@ -1,13 +1,13 @@ :: BASE_DOC :: ## API + ### Popup Props name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -closeBtn | TNode | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N delay | Number / Array | - | delay to show or hide popover。Typescript：`number \| Array` | N destroyOnClose | Boolean | false | \- | N @@ -20,10 +20,20 @@ overlayStyle | Boolean / Object / Function | - | Typescript：`Styles \| ((trigg placement | String | top | Typescript：`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/popup/type.ts) | N popperOptions | Object | - | popper initial options，details refer to https://popper.js.org/docs | N showArrow | Boolean | false | \- | N -trigger | String | hover | options：hover/click/focus/mousedown/context-menu | N +trigger | String | hover | options: hover/click/focus/mousedown/context-menu | N triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N visible | Boolean | - | Typescript：`boolean` | N +defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N zIndex | Number | - | \- | N +onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on popup content click | N onScroll | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N onScrollToBottom | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N onVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N + +### PopupInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +getOverlay | \- | `HTMLElement` | used to get overly html element +getOverlayState | \- | `{ hover: boolean }` | get mouseover state of overlay +update | \- | \- | used to update overlay content diff --git a/packages/products/tdesign-react/src/popup/popup.md b/packages/products/tdesign-react/src/popup/popup.md index 3ca8415de..7550515fb 100644 --- a/packages/products/tdesign-react/src/popup/popup.md +++ b/packages/products/tdesign-react/src/popup/popup.md @@ -1,13 +1,13 @@ :: BASE_DOC :: ## API + ### Popup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +attach | String / Function | - | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N children | TNode | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -closeBtn | TNode | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N content | TNode | - | 浮层里面的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N delay | Number / Array | - | 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]。TS 类型：`number \| Array` | N destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N @@ -23,7 +23,17 @@ showArrow | Boolean | false | 是否显示浮层箭头 | N trigger | String | hover | 触发浮层出现的方式。可选项：hover/click/focus/mousedown/context-menu | N triggerElement | TNode | - | 触发元素。值类型为字符串表示元素选择器。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N visible | Boolean | - | 是否显示浮层。TS 类型：`boolean` | N +defaultVisible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N zIndex | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 | N +onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
内容面板点击时触发 | N onScroll | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉选项滚动事件 | N onScrollToBottom | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 | N onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N + +### PopupInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +getOverlay | \- | `HTMLElement` | 获取浮层元素 +getOverlayState | \- | `{ hover: boolean }` | 获取浮层悬浮状态 +update | \- | \- | 更新浮层内容 diff --git a/packages/products/tdesign-react/src/popup/type.ts b/packages/products/tdesign-react/src/popup/type.ts index 0d6af50b1..7fbaea430 100644 --- a/packages/products/tdesign-react/src/popup/type.ts +++ b/packages/products/tdesign-react/src/popup/type.ts @@ -9,18 +9,13 @@ import { MouseEvent, KeyboardEvent, FocusEvent, WheelEvent } from 'react'; export interface TdPopupProps { /** - * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body - * @default 'body' + * 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ attach?: AttachNode; /** * 触发元素，同 triggerElement */ children?: TNode; - /** - * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 - */ - closeBtn?: TNode; /** * 浮层里面的内容 */ @@ -94,6 +89,10 @@ export interface TdPopupProps { * 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 */ zIndex?: number; + /** + * 内容面板点击时触发 + */ + onOverlayClick?: (context: { e: MouseEvent }) => void; /** * 下拉选项滚动事件 */ @@ -108,6 +107,22 @@ export interface TdPopupProps { onVisibleChange?: (visible: boolean, context: PopupVisibleChangeContext) => void; } +/** 组件实例方法 */ +export interface PopupInstanceFunctions { + /** + * 获取浮层元素 + */ + getOverlay?: () => HTMLElement; + /** + * 获取浮层悬浮状态 + */ + getOverlayState?: () => { hover: boolean }; + /** + * 更新浮层内容 + */ + update?: () => void; +} + export type PopupPlacement = | 'top' | 'left' diff --git a/packages/products/tdesign-vue-next/src/popup/popup.en-US.md b/packages/products/tdesign-vue-next/src/popup/popup.en-US.md index 9e66b4a62..9f497a057 100644 --- a/packages/products/tdesign-vue-next/src/popup/popup.en-US.md +++ b/packages/products/tdesign-vue-next/src/popup/popup.en-US.md @@ -1,12 +1,12 @@ :: BASE_DOC :: ## API + ### Popup Props name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -closeBtn | Boolean / Slot / Function | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N delay | Number / Array | - | delay to show or hide popover。Typescript：`number \| Array` | N @@ -20,10 +20,12 @@ overlayStyle | Boolean / Object / Function | - | Typescript：`Styles \| ((trigg placement | String | top | Typescript：`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/popup/type.ts) | N popperOptions | Object | - | popper initial options，details refer to https://popper.js.org/docs | N showArrow | Boolean | false | \- | N -trigger | String | hover | options：hover/click/focus/mousedown/context-menu | N +trigger | String | hover | options: hover/click/focus/mousedown/context-menu | N triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N visible | Boolean | - | `v-model` and `v-model:visible` is supported。Typescript：`boolean` | N +defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N zIndex | Number | - | \- | N +onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on popup content click | N onScroll | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N onScrollToBottom | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N onVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N @@ -32,6 +34,15 @@ onVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupV name | params | description -- | -- | -- +overlay-click | `(context: { e: MouseEvent })` | trigger on popup content click 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-next/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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
+ +### PopupInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +getOverlay | \- | `HTMLElement` | used to get overly html element +getOverlayState | \- | `{ hover: boolean }` | get mouseover state of overlay +update | \- | \- | used to update overlay content diff --git a/packages/products/tdesign-vue-next/src/popup/popup.md b/packages/products/tdesign-vue-next/src/popup/popup.md index 510e18bcf..507d59eaa 100644 --- a/packages/products/tdesign-vue-next/src/popup/popup.md +++ b/packages/products/tdesign-vue-next/src/popup/popup.md @@ -1,12 +1,12 @@ :: BASE_DOC :: ## API + ### Popup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N -closeBtn | Boolean / Slot / Function | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N +attach | String / Function | - | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N content | String / Slot / Function | - | 浮层里面的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N delay | Number / Array | - | 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]。TS 类型：`number \| Array` | N @@ -23,7 +23,9 @@ showArrow | Boolean | false | 是否显示浮层箭头 | N trigger | String | hover | 触发浮层出现的方式。可选项：hover/click/focus/mousedown/context-menu | N triggerElement | String / Slot / Function | - | 触发元素。值类型为字符串表示元素选择器。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N visible | Boolean | - | 是否显示浮层。支持语法糖 `v-model` 或 `v-model:visible`。TS 类型：`boolean` | N +defaultVisible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N zIndex | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 | N +onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
内容面板点击时触发 | N onScroll | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉选项滚动事件 | N onScrollToBottom | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 | N onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发，`trigger=document` 表示点击非浮层元素触发；`trigger=context-menu` 表示右击触发。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N @@ -32,6 +34,15 @@ onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVi 名称 | 参数 | 描述 -- | -- | -- +overlay-click | `(context: { e: MouseEvent })` | 内容面板点击时触发 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-next/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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
+ +### PopupInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +getOverlay | \- | `HTMLElement` | 获取浮层元素 +getOverlayState | \- | `{ hover: boolean }` | 获取浮层悬浮状态 +update | \- | \- | 更新浮层内容 diff --git a/packages/products/tdesign-vue-next/src/popup/props.ts b/packages/products/tdesign-vue-next/src/popup/props.ts index 6191b860a..4fa191e90 100644 --- a/packages/products/tdesign-vue-next/src/popup/props.ts +++ b/packages/products/tdesign-vue-next/src/popup/props.ts @@ -8,14 +8,9 @@ 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'], - }, - /** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 */ - closeBtn: { - type: [Boolean, Function] as PropType, }, /** 浮层里面的内容 */ content: { @@ -90,6 +85,8 @@ export default { zIndex: { type: Number, }, + /** 内容面板点击时触发 */ + onOverlayClick: Function as PropType, /** 下拉选项滚动事件 */ onScroll: Function as PropType, /** 下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 */ diff --git a/packages/products/tdesign-vue-next/src/popup/type.ts b/packages/products/tdesign-vue-next/src/popup/type.ts index dc9cd5832..963836740 100644 --- a/packages/products/tdesign-vue-next/src/popup/type.ts +++ b/packages/products/tdesign-vue-next/src/popup/type.ts @@ -8,14 +8,9 @@ import { TNode, ClassName, Styles, AttachNode } from '../common'; export interface TdPopupProps { /** - * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body - * @default 'body' + * 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ attach?: AttachNode; - /** - * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 - */ - closeBtn?: boolean | TNode; /** * 浮层里面的内容 */ @@ -97,6 +92,10 @@ export interface TdPopupProps { * 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 */ zIndex?: number; + /** + * 内容面板点击时触发 + */ + onOverlayClick?: (context: { e: MouseEvent }) => void; /** * 下拉选项滚动事件 */ @@ -111,6 +110,22 @@ export interface TdPopupProps { onVisibleChange?: (visible: boolean, context: PopupVisibleChangeContext) => void; } +/** 组件实例方法 */ +export interface PopupInstanceFunctions { + /** + * 获取浮层元素 + */ + getOverlay?: () => HTMLElement; + /** + * 获取浮层悬浮状态 + */ + getOverlayState?: () => { hover: boolean }; + /** + * 更新浮层内容 + */ + update?: () => void; +} + export type PopupPlacement = | 'top' | 'left' diff --git a/packages/products/tdesign-vue/src/popup/popup.en-US.md b/packages/products/tdesign-vue/src/popup/popup.en-US.md index 478776fd8..9c6d90882 100644 --- a/packages/products/tdesign-vue/src/popup/popup.en-US.md +++ b/packages/products/tdesign-vue/src/popup/popup.en-US.md @@ -1,12 +1,12 @@ :: BASE_DOC :: ## API + ### Popup Props name | type | default | description | required -- | -- | -- | -- | -- -attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -closeBtn | Boolean / Slot / Function | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +attach | String / Function | - | Typescript：`AttachNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N content | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N delay | Number / Array | - | delay to show or hide popover。Typescript：`number \| Array` | N @@ -20,10 +20,12 @@ overlayStyle | Boolean / Object / Function | - | Typescript：`Styles \| ((trigg placement | String | top | Typescript：`PopupPlacement` `type PopupPlacement = 'top'\|'left'\|'right'\|'bottom'\|'top-left'\|'top-right'\|'bottom-left'\|'bottom-right'\|'left-top'\|'left-bottom'\|'right-top'\|'right-bottom'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/popup/type.ts) | N popperOptions | Object | - | popper initial options，details refer to https://popper.js.org/docs | N showArrow | Boolean | false | \- | N -trigger | String | hover | options：hover/click/focus/mousedown/context-menu | N +trigger | String | hover | options: hover/click/focus/mousedown/context-menu | N triggerElement | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N visible | Boolean | - | `v-model` is supported。Typescript：`boolean` | N +defaultVisible | Boolean | - | uncontrolled property。Typescript：`boolean` | N zIndex | Number | - | \- | N +onOverlayClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
trigger on popup content click | N onScroll | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N onScrollToBottom | Function | | Typescript：`(context: { e: WheelEvent }) => void`
| N onVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupVisibleChangeContext) => void`
[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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N @@ -32,6 +34,15 @@ onVisibleChange | Function | | Typescript：`(visible: boolean, context: PopupV name | params | description -- | -- | -- +overlay-click | `(context: { e: MouseEvent })` | trigger on popup content click 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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
+ +### PopupInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +getOverlay | \- | `HTMLElement` | used to get overly html element +getOverlayState | \- | `{ hover: boolean }` | get mouseover state of overlay +update | \- | \- | used to update overlay content diff --git a/packages/products/tdesign-vue/src/popup/popup.md b/packages/products/tdesign-vue/src/popup/popup.md index 229906439..74f3d856a 100644 --- a/packages/products/tdesign-vue/src/popup/popup.md +++ b/packages/products/tdesign-vue/src/popup/popup.md @@ -1,12 +1,12 @@ :: BASE_DOC :: ## API + ### Popup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- -attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N -closeBtn | Boolean / Slot / Function | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +attach | String / Function | - | 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N content | String / Slot / Function | - | 浮层里面的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N default | String / Slot / Function | - | 触发元素，同 triggerElement。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N delay | Number / Array | - | 延时显示或隐藏浮层，[延迟显示的时间，延迟隐藏的时间]，单位：毫秒。如果只有一个时间，则表示显示和隐藏的延迟时间相同。示例 `'300'` 或者 `[200, 200]`。默认为：[250, 150]。TS 类型：`number \| Array` | N @@ -23,7 +23,9 @@ showArrow | Boolean | false | 是否显示浮层箭头 | N trigger | String | hover | 触发浮层出现的方式。可选项：hover/click/focus/mousedown/context-menu | N triggerElement | String / Slot / Function | - | 触发元素。值类型为字符串表示元素选择器。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N visible | Boolean | - | 是否显示浮层。支持语法糖 `v-model`。TS 类型：`boolean` | N +defaultVisible | Boolean | - | 是否显示浮层。非受控属性。TS 类型：`boolean` | N zIndex | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 | N +onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
内容面板点击时触发 | N onScroll | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉选项滚动事件 | N onScrollToBottom | Function | | TS 类型：`(context: { e: WheelEvent }) => void`
下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 | N onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVisibleChangeContext) => void`
当浮层隐藏或显示时触发，`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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
| N @@ -32,6 +34,15 @@ onVisibleChange | Function | | TS 类型：`(visible: boolean, context: PopupVi 名称 | 参数 | 描述 -- | -- | -- +overlay-click | `(context: { e: MouseEvent })` | 内容面板点击时触发 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' \| 'trigger-element-close' \| 'context-menu' \| 'keydown-esc'`
+ +### PopupInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +getOverlay | \- | `HTMLElement` | 获取浮层元素 +getOverlayState | \- | `{ hover: boolean }` | 获取浮层悬浮状态 +update | \- | \- | 更新浮层内容 diff --git a/packages/products/tdesign-vue/src/popup/props.ts b/packages/products/tdesign-vue/src/popup/props.ts index a975441f6..db8a8752a 100644 --- a/packages/products/tdesign-vue/src/popup/props.ts +++ b/packages/products/tdesign-vue/src/popup/props.ts @@ -8,14 +8,9 @@ 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', - }, - /** 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 */ - closeBtn: { - type: [Boolean, Function] as PropType, }, /** 浮层里面的内容 */ content: { @@ -83,6 +78,8 @@ export default { zIndex: { type: Number, }, + /** 内容面板点击时触发 */ + onOverlayClick: Function as PropType, /** 下拉选项滚动事件 */ onScroll: Function as PropType, /** 下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 */ diff --git a/packages/products/tdesign-vue/src/popup/type.ts b/packages/products/tdesign-vue/src/popup/type.ts index 5c9004d11..d1dc87637 100644 --- a/packages/products/tdesign-vue/src/popup/type.ts +++ b/packages/products/tdesign-vue/src/popup/type.ts @@ -8,14 +8,9 @@ import { TNode, ClassName, Styles, AttachNode } from '../common'; export interface TdPopupProps { /** - * 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body - * @default 'body' + * 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ attach?: AttachNode; - /** - * 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮 - */ - closeBtn?: boolean | TNode; /** * 浮层里面的内容 */ @@ -93,6 +88,10 @@ export interface TdPopupProps { * 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 */ zIndex?: number; + /** + * 内容面板点击时触发 + */ + onOverlayClick?: (context: { e: MouseEvent }) => void; /** * 下拉选项滚动事件 */ @@ -107,6 +106,22 @@ export interface TdPopupProps { onVisibleChange?: (visible: boolean, context: PopupVisibleChangeContext) => void; } +/** 组件实例方法 */ +export interface PopupInstanceFunctions { + /** + * 获取浮层元素 + */ + getOverlay?: () => HTMLElement; + /** + * 获取浮层悬浮状态 + */ + getOverlayState?: () => { hover: boolean }; + /** + * 更新浮层内容 + */ + update?: () => void; +} + export type PopupPlacement = | 'top' | 'left' diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 32b57882f..733d4136f 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -82174,9 +82174,6 @@ { "id": 423, "platform_framework": [ - "1", - "2", - "4", "8", "16", "32" @@ -82208,9 +82205,6 @@ "support_default_value": 0, "field_category_text": "Props", "platform_framework_text": [ - "Vue(PC)", - "React(PC)", - "Angular(PC)", "Vue(Mobile)", "React(Mobile)", "Angular(Mobile)" @@ -82220,6 +82214,49 @@ "Function" ] }, + { + "id": 1735117681, + "platform_framework": [ + "1", + "2", + "4" + ], + "component": "Popup", + "field_category": 1, + "field_name": "attach", + "field_type": [ + "1", + "32" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2024-12-25 09:08:01", + "update_time": "2024-12-25 09:08:01", + "event_output": null, + "custom_field_type": "AttachNode", + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(PC)", + "React(PC)", + "Angular(PC)" + ], + "field_type_text": [ + "String", + "Function" + ] + }, { "id": 1229, "platform_framework": [ From 69329a0f7308985239f5fd0fdc486ca606c618ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Wed, 25 Dec 2024 21:31:27 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(Popup):=20attach=20=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- db/TDesign.db | Bin 1007616 -> 1007616 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index ddd6cf4349fe129e83a9d3e6e2d80ac817345454..f841d465250e16d1e650faf950badb540fda97a6 100644 GIT binary patch delta 249 zcmZoTVB2uOc7inHsfjYqjHenCS`!#s6PUIpFdN3PSp?)4lom{n(c_=fZXC}H#4JF} z3dC$c%nrmHK+FlmTtLhX#5_REJKZ>*?;@kmcGd*GnM_PPI@=c{@!4}S226jD%@@Fy zo_)HIZ{v2e9KLgpIhgp`8TgC%+P5nja82OcZm@ylHH&^@`dmXP7DjPSNk(4YCRGLw zUSnehMFvg|UJhOc4v>C!u)`8dN)nSZ6sKqE@lVt?G}1LPRWPu$GO(~RFf=kSGSNj9 Ras;dP%TGz2UKG#Y2LP5}NVEU| delta 155 zcmZoTVB2uOc7inHiHS1Kj3*isS`!#s6PUIpFdN3P*$3nolom{n(c_=fZXC}H#4JF} z3dC$c%nrmHK+FlmTtLhX#5_REJKZ>*?;@l3cGd*GnM_P+_qQ)d;