From d35d7f0b9439695e4b9223fee3d71c3250a99525 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 16:53:54 +0800 Subject: [PATCH 01/11] feat: support global config attach --- src/config-provider/config-provider.en-US.md | 18 +++++++++++++ src/config-provider/config-provider.md | 18 +++++++++++++ src/config-provider/type.ts | 28 +++++++++++++++++++- src/dialog/dialog.tsx | 8 ++++-- src/drawer/drawer.tsx | 8 ++++-- src/hooks/useAttach.ts | 24 +++++++++++++++++ src/popup/popup.en-US.md | 21 ++++++++------- src/popup/popup.md | 23 ++++++++-------- src/popup/popup.tsx | 7 ++++- src/popup/props.ts | 4 ++- src/popup/type.ts | 25 ++++++++++++++--- 11 files changed, 153 insertions(+), 31 deletions(-) create mode 100644 src/hooks/useAttach.ts diff --git a/src/config-provider/config-provider.en-US.md b/src/config-provider/config-provider.en-US.md index 2f602dff7..b7c7873e0 100644 --- a/src/config-provider/config-provider.en-US.md +++ b/src/config-provider/config-provider.en-US.md @@ -62,6 +62,7 @@ name | type | default | description | required alert | Object | - | Alert global configs。Typescript：`AlertConfig` | N anchor | Object | - | Anchor global configs。Typescript：`AnchorConfig` | N animation | Object | - | Typescript：`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +attach | String / Object / Function | - | Typescript：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N calendar | Object | - | Calendar global configs。Typescript：`CalendarConfig` | N cascader | Object | - | Cascader global configs。Typescript：`CascaderConfig` | N classPrefix | String | t | \- | N @@ -70,6 +71,7 @@ datePicker | Object | - | DatePicker global configs。Typescript：`DatePickerCo descriptions | Object | - | Descriptions global configs。Typescript：`DescriptionsConfig` | N dialog | Object | - | Dialog global configs。Typescript：`DialogConfig` | N drawer | Object | - | Drawer global configs。Typescript：`DrawerConfig` | N +empty | Object | - | Empty global configs。Typescript：`EmptyConfig` | N form | Object | - | Form global configs。Typescript：`FormConfig` | N guide | Object | - | Guide global configs。Typescript：`GuideConfig` | N icon | Object | - | icon config。Typescript：`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N @@ -89,6 +91,7 @@ timePicker | Object | - | TimePicker global configs。Typescript：`TimePickerCo transfer | Object | - | Transfer global configs。Typescript：`TransferConfig` | N tree | Object | - | Tree global configs。Typescript：`TreeConfig` | N treeSelect | Object | - | TreeSelect global configs。Typescript：`TreeSelectConfig` | N +typography | Object | - | Typography global configs。Typescript：`TypographyConfig` | N upload | Object | - | Upload global configs。Typescript：`UploadConfig` | N ### InputConfig @@ -390,3 +393,18 @@ skipButtonProps | Object | - | skip button. `{ content: 'Skip', theme: 'default' name | type | default | description | required -- | -- | -- | -- | -- rateText | Array | - | Typescript：`string[]` | N + +### EmptyConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +image | Object | - | Typescript：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +titleText | Object | - | Typescript：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N + +### TypographyConfig + +name | type | default | description | required +-- | -- | -- | -- | -- +collapseText | String | - | collapse text | N +copiedText | String | - | copied text | N +expandText | String | - | expand text | N diff --git a/src/config-provider/config-provider.md b/src/config-provider/config-provider.md index 5cbe48952..c3d268100 100644 --- a/src/config-provider/config-provider.md +++ b/src/config-provider/config-provider.md @@ -63,6 +63,7 @@ Vue.use(TDesign); alert | Object | - | 警告全局配置。TS 类型：`AlertConfig` | N anchor | Object | - | 锚点全局配置。TS 类型：`AnchorConfig` | N animation | Object | - | 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }`。TS 类型：`Partial>>` `type AnimationType = 'ripple' \| 'expand' \| 'fade'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N +attach | String / Object / Function | - | TS 类型：`AttachNode \| { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N calendar | Object | - | 日历组件全局配置。TS 类型：`CalendarConfig` | N cascader | Object | - | 级联选择器全局配置。TS 类型：`CascaderConfig` | N classPrefix | String | t | CSS 类名前缀 | N @@ -71,6 +72,7 @@ datePicker | Object | - | 日期选择器全局配置。TS 类型：`DatePickerC descriptions | Object | - | 描述全局配置。TS 类型：`DescriptionsConfig` | N dialog | Object | - | 对话框全局配置。TS 类型：`DialogConfig` | N drawer | Object | - | 抽屉全局配置。TS 类型：`DrawerConfig` | N +empty | Object | - | 空状态全局配置。TS 类型：`EmptyConfig` | N form | Object | - | 表单组件全局配置。TS 类型：`FormConfig` | N guide | Object | - | 引导全局配置。TS 类型：`GuideConfig` | N icon | Object | - | 图标全局配置。TS 类型：`IconConfig` `type IconConfig = GlobalIconConfig` `import { GlobalIconConfig } from '@icon'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/config-provider/type.ts) | N @@ -90,6 +92,7 @@ timePicker | Object | - | 时间选择器全局配置。TS 类型：`TimePickerC transfer | Object | - | 穿梭框全局配置。TS 类型：`TransferConfig` | N tree | Object | - | 树组件全局配置。TS 类型：`TreeConfig` | N treeSelect | Object | - | 树选择器组件全局配置。TS 类型：`TreeSelectConfig` | N +typography | Object | - | 排版组件全局配置。TS 类型：`TypographyConfig` | N upload | Object | - | 上传组件全局配置。TS 类型：`UploadConfig` | N ### InputConfig @@ -391,3 +394,18 @@ skipButtonProps | Object | - | 跳过按钮，示例：`{ content: '跳过', the 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- rateText | Array | - | 评分描述，默认值：['极差', '失望', '一般', '满意', '惊喜']。TS 类型：`string[]` | N + +### EmptyConfig + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +image | Object | - | 空状态组件各类型的图片配置。TS 类型：`{ maintenance: TNode; success: TNode; fail: TNode; empty: TNode; networkError: TNode; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N +titleText | Object | - | 空状态组件各类型的标题文本配置。TS 类型：`{ maintenance: string; success: string; fail: string; empty: string; networkError: string; }` | N + +### TypographyConfig + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +collapseText | String | - | 语言配置，“收起”描述文本 | N +copiedText | String | - | 语言配置，“复制成功”描述文本 | N +expandText | String | - | 语言配置，“展开”描述文本 | N diff --git a/src/config-provider/type.ts b/src/config-provider/type.ts index b7fa269c1..23ea74e12 100644 --- a/src/config-provider/type.ts +++ b/src/config-provider/type.ts @@ -10,7 +10,7 @@ import { ButtonProps } from '../button'; import { FormErrorMessage } from '../form'; import { MessageOptions } from '../message'; import { ImageProps } from '../image'; -import { TNode, SizeEnum } from '../common'; +import { TNode, SizeEnum, AttachNode } from '../common'; export interface GlobalConfigProvider { /** @@ -25,6 +25,10 @@ export interface GlobalConfigProvider { * 动画效果控制，`ripple` 指波纹动画， `expand` 指展开动画，`fade` 指渐变动画。默认为 `{ include: ['ripple','expand','fade'], exclude: [] }` */ animation?: Partial>>; + /** + * null + */ + attach?: AttachNode | { imageViewer?: AttachNode; popup?: AttachNode; dialog?: AttachNode; drawer?: AttachNode }; /** * 日历组件全局配置 */ @@ -138,6 +142,10 @@ export interface GlobalConfigProvider { * 树选择器组件全局配置 */ treeSelect?: TreeSelectConfig; + /** + * 排版组件全局配置 + */ + typography?: TypographyConfig; /** * 上传组件全局配置 */ @@ -934,6 +942,24 @@ export interface EmptyConfig { titleText?: { maintenance: string; success: string; fail: string; empty: string; networkError: string }; } +export interface TypographyConfig { + /** + * 语言配置，“收起”描述文本 + * @default '' + */ + collapseText?: string; + /** + * 语言配置，“复制成功”描述文本 + * @default '' + */ + copiedText?: string; + /** + * 语言配置，“展开”描述文本 + * @default '' + */ + expandText?: string; +} + export type AnimationType = 'ripple' | 'expand' | 'fade'; export type IconConfig = GlobalIconConfig; diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx index 96f36772a..fb9f7ccef 100644 --- a/src/dialog/dialog.tsx +++ b/src/dialog/dialog.tsx @@ -8,6 +8,7 @@ import { ErrorCircleFilledIcon as TdErrorCircleFilledIcon, } from 'tdesign-icons-vue'; +import useAttach from '../hooks/useAttach'; import TButton from '../button'; import ActionMixin from './actions'; import { DialogCloseContext, TdDialogProps } from './type'; @@ -17,7 +18,7 @@ import mixins from '../utils/mixins'; import getConfigReceiverMixins, { DialogConfig, getGlobalIconMixins } from '../config-provider/config-receiver'; import TransferDom from '../utils/transfer-dom'; import { emitEvent } from '../utils/event'; -import { ClassName, Styles } from '../common'; +import { AttachNode, ClassName, Styles } from '../common'; import { updateElement } from '../hooks/useDestroyOnClose'; import stack from './stack'; import { getScrollbarWidth } from '../_common/js/utils/getScrollbarWidth'; @@ -144,6 +145,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d computedDialogStyle(): Styles { return !this.isFullScreen ? { width: getCSSValue(this.width), ...this.dialogStyle } : { ...this.dialogStyle }; // width全屏模式不生效; }, + computeAttach(): AttachNode { + return useAttach('dialog', this.attach).value; + }, }, watch: { @@ -518,7 +522,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d onBeforeLeave={this.beforeLeave} onAfterLeave={this.afterLeave} > -
+
{view}
diff --git a/src/drawer/drawer.tsx b/src/drawer/drawer.tsx index d2c02da02..0208a9859 100644 --- a/src/drawer/drawer.tsx +++ b/src/drawer/drawer.tsx @@ -9,9 +9,10 @@ import mixins from '../utils/mixins'; import getConfigReceiverMixins, { DrawerConfig, getGlobalIconMixins } from '../config-provider/config-receiver'; import TransferDom from '../utils/transfer-dom'; import { emitEvent } from '../utils/event'; -import { ClassName, Styles } from '../common'; +import { AttachNode, ClassName, Styles } from '../common'; import ActionMixin from '../dialog/actions'; import { getScrollbarWidth } from '../_common/js/utils/getScrollbarWidth'; +import useAttach from '../hooks/useAttach'; type FooterButtonType = 'confirm' | 'cancel'; @@ -110,6 +111,9 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d cursor: this.isHorizontal ? 'col-resize' : 'row-resize', }; }, + computeAttach(): AttachNode { + return useAttach('drawer', this.attach).value; + }, }, watch: { @@ -180,7 +184,7 @@ export default mixins(ActionMixin, getConfigReceiverMixins('d class={this.drawerClasses} style={{ zIndex: this.zIndex }} onkeydown={this.onKeyDown} - v-transfer-dom={this.attach} + v-transfer-dom={this.computeAttach} ref="drawerContainer" tabindex={0} v-show={this.visible} diff --git a/src/hooks/useAttach.ts b/src/hooks/useAttach.ts new file mode 100644 index 000000000..349249ba7 --- /dev/null +++ b/src/hooks/useAttach.ts @@ -0,0 +1,24 @@ +import { computed } from '@vue/composition-api'; +import { useConfig } from './useConfig'; +import { AttachNode } from '../common'; + +const defaultAttach = 'body'; + +/** + * useAttach + * + * 挂载节点 优先级: + * + * props attach -> globalConfig.attach.component -> globalConfig.attach -> default = 'body' + */ + +export function useAttach(name: string, attach: AttachNode) { + const { globalConfig } = useConfig('attach'); + const attachVal = computed( + () => attach || globalConfig.value[name] || globalConfig.value || defaultAttach, + ); + + return attachVal; +} + +export default useAttach; diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 63d6f990e..222ee5f0e 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Popup Props name | type | default | description | required @@ -19,29 +20,29 @@ 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' \| 'context-menu' \| 'keydown-esc'`
| 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 ### Popup Events 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' \| 'context-menu' \| 'keydown-esc'`
- -### PopupPlugin +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'`
-support `this.$popup` +### PopupInstanceFunctions 组件实例方法 -name | params | default | description +name | params | return | 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 +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/src/popup/popup.md b/src/popup/popup.md index 4613bbd09..838f9b923 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -11,11 +11,12 @@ {{ plugin }} ## 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 +attach | String / Function | 'body' | 指定挂载节点。数据类型为 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 @@ -34,24 +35,24 @@ triggerElement | String / Slot / Function | - | 触发元素。值类型为字 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' \| 'context-menu' \| 'keydown-esc'`
| 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 ### Popup Events 名称 | 参数 | 描述 -- | -- | -- +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' \| 'context-menu' \| 'keydown-esc'`
- -### PopupPlugin +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'`
-同时也支持 `this.$popup`。 +### PopupInstanceFunctions 组件实例方法 -参数名称 | 参数类型 | 参数默认值 | 参数说明 +名称 | 参数 | 返回值 | 描述 -- | -- | -- | -- -content | String / Slot / Function | - | 必需。气泡框的内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) -popupProps | Object | - | 透传气泡框/浮层的属性 -triggerElement | String | - | 必需。触发气泡框/浮层的元素，传入选择器即可 +getOverlay | \- | `HTMLElement` | 获取浮层元素 +getOverlayState | \- | `{ hover: boolean }` | 获取浮层悬浮状态 +update | \- | \- | 更新浮层内容 diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx index 161e16b9d..380224058 100644 --- a/src/popup/popup.tsx +++ b/src/popup/popup.tsx @@ -11,9 +11,11 @@ import Container from './container'; import { getClassPrefixMixins } from '../config-provider/config-receiver'; import mixins from '../utils/mixins'; import { emitEvent } from '../utils/event'; +import useAttach from '../hooks/useAttach'; import { getPopperPlacement, attachListeners, triggers, defaultVisibleDelay, } from './utils'; +import { AttachNode } from '../common'; const classPrefixMixins = getClassPrefixMixins('popup'); @@ -89,6 +91,9 @@ export default mixins(classPrefixMixins).extend({ close: delay[1] ?? delay[0], }; }, + computeAttach(): AttachNode { + return useAttach('popup', this.attach).value; + }, }, watch: { visible(visible) { @@ -449,7 +454,7 @@ export default mixins(classPrefixMixins).extend({ }} parent={this} visible={visible} - attach={() => ({ attach: this.attach, current: this.$el })} + attach={() => ({ attach: this.computeAttach, current: this.$el })} > document.body */ + /** 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body */ attach: { type: [String, Function] as PropType, default: 'body', @@ -82,6 +82,8 @@ export default { zIndex: { type: Number, }, + /** 内容面板点击时触发 */ + onOverlayClick: Function as PropType, /** 下拉选项滚动事件 */ onScroll: Function as PropType, /** 下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 */ diff --git a/src/popup/type.ts b/src/popup/type.ts index 5b883a175..bb5f3100b 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -6,11 +6,9 @@ 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 + * 指定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body * @default 'body' */ attach?: AttachNode; @@ -91,6 +89,10 @@ export interface TdPopupProps { * 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 */ zIndex?: number; + /** + * 内容面板点击时触发 + */ + onOverlayClick?: (context: { e: MouseEvent }) => void; /** * 下拉选项滚动事件 */ @@ -105,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' @@ -133,5 +151,6 @@ export type PopupTriggerSource = | 'trigger-element-blur' | 'trigger-element-focus' | 'trigger-element-mousedown' + | 'trigger-element-close' | 'context-menu' | 'keydown-esc'; From cb8b22d7f4ad74f032e181e52c2e336cf66935e1 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 16:54:11 +0800 Subject: [PATCH 02/11] chore: update common --- src/_common | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/_common b/src/_common index 53786c587..1873fcceb 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 53786c58752401e648cc45918f2a4dbb9e8cecfa +Subproject commit 1873fcceb1c8a045dc9d26e7c626fec6467c52dc From 00fb3e3477f94fe5673360af19849baa4df3d7c3 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 16:59:24 +0800 Subject: [PATCH 03/11] chore: api update --- src/popup/popup.en-US.md | 2 -- src/popup/popup.md | 2 -- src/popup/props.ts | 2 -- src/popup/type.ts | 4 ---- 4 files changed, 10 deletions(-) diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 222ee5f0e..70318eff8 100644 --- a/src/popup/popup.en-US.md +++ b/src/popup/popup.en-US.md @@ -25,7 +25,6 @@ triggerElement | String / Slot / Function | - | Typescript：`string \| TNode` 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 @@ -34,7 +33,6 @@ 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'`
diff --git a/src/popup/popup.md b/src/popup/popup.md index 838f9b923..89e588702 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -35,7 +35,6 @@ triggerElement | String / Slot / Function | - | 触发元素。值类型为字 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 @@ -44,7 +43,6 @@ 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'`
diff --git a/src/popup/props.ts b/src/popup/props.ts index c2d2ec5bc..a0f996698 100644 --- a/src/popup/props.ts +++ b/src/popup/props.ts @@ -82,8 +82,6 @@ export default { zIndex: { type: Number, }, - /** 内容面板点击时触发 */ - onOverlayClick: Function as PropType, /** 下拉选项滚动事件 */ onScroll: Function as PropType, /** 下拉滚动触底事件，常用于滚动到底执行具体业务逻辑 */ diff --git a/src/popup/type.ts b/src/popup/type.ts index bb5f3100b..58a1630ab 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -89,10 +89,6 @@ export interface TdPopupProps { * 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 1500 */ zIndex?: number; - /** - * 内容面板点击时触发 - */ - onOverlayClick?: (context: { e: MouseEvent }) => void; /** * 下拉选项滚动事件 */ From 7863be2e2d71122cdef279aaa01ed10a1e61ef28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 26 Dec 2024 16:16:21 +0800 Subject: [PATCH 04/11] fix: test --- src/hooks/useAttach.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hooks/useAttach.ts b/src/hooks/useAttach.ts index 349249ba7..9ff641094 100644 --- a/src/hooks/useAttach.ts +++ b/src/hooks/useAttach.ts @@ -13,11 +13,10 @@ const defaultAttach = 'body'; */ export function useAttach(name: string, attach: AttachNode) { - const { globalConfig } = useConfig('attach'); + const { globalConfig } = useConfig(); const attachVal = computed( - () => attach || globalConfig.value[name] || globalConfig.value || defaultAttach, + () => attach || globalConfig.value.attach[name] || globalConfig.value.attach || defaultAttach, ); - return attachVal; } From 4286dc08423b088542ec3eb043c964f9ff2341e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 26 Dec 2024 16:26:42 +0800 Subject: [PATCH 05/11] fix: test --- src/hooks/useAttach.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useAttach.ts b/src/hooks/useAttach.ts index 9ff641094..c63a890f3 100644 --- a/src/hooks/useAttach.ts +++ b/src/hooks/useAttach.ts @@ -15,7 +15,7 @@ const defaultAttach = 'body'; export function useAttach(name: string, attach: AttachNode) { const { globalConfig } = useConfig(); const attachVal = computed( - () => attach || globalConfig.value.attach[name] || globalConfig.value.attach || defaultAttach, + () => attach || globalConfig.value.attach?.[name] || globalConfig.value?.attach || defaultAttach, ); return attachVal; } From 64f4192385e31d777eb4c8afa6253f3af1e0ec59 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 26 Dec 2024 08:55:49 +0000 Subject: [PATCH 06/11] chore: update snapshot --- test/snap/__snapshots__/csr.test.js.snap | 7784 ++++++---------------- 1 file changed, 1920 insertions(+), 5864 deletions(-) diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap index a51012700..e54b55966 100644 --- a/test/snap/__snapshots__/csr.test.js.snap +++ b/test/snap/__snapshots__/csr.test.js.snap @@ -35868,782 +35868,369 @@ exports[`csr snapshot test > csr test ./src/config-provider/_example/dialog.vue data-v-6be7f270="" duration="300" name="t-dialog-zoom__vue" + /> +
+ +
+ +
+ +
+ +
+`; + +exports[`csr snapshot test > csr test ./src/config-provider/_example/global.vue 1`] = ` +
+
+

+ 使用 + + t-config-provider + + 包裹业务功能的最外层组件，点击下方图标查看示例代码 +

+
+
+

+ 英文语言包引入路径： + + import enConfig from 'tdesign-vue/es/locale/en_US'; + +

+
+
+

+ 中文语言包引入路径： + + import zhConfig from 'tdesign-vue/es/locale/zh_CN'; + +

+
+
+

+ 日文语言包引入路径： + + import jpConfig from 'tdesign-vue/es/locale/ja_JP'; + +

+
+
+

+ 韩文语言包引入路径： + + import koConfig from 'tdesign-vue/es/locale/ko_KR'; + +

+
+
+`; + +exports[`csr snapshot test > csr test ./src/config-provider/_example/input.vue 1`] = ` +
+
+ + + + + + +
+
+`; + +exports[`csr snapshot test > csr test ./src/config-provider/_example/others.vue 1`] = ` +
+
+ +
+
-
- Title -
- - - - - -
-
- Would you like to be my friends？ -
-
-
- - -
+
- -
-
+ +
+
-
+ - - confirm -
- - -
-
- Would you like to be my friends？ -
-
-
- - -
-
- +

- +
-
-
+
+ + + + + + 0 / 20 +
+
-
- -
- -
-
- - - - confirm -
+
-
- Would you like to be my friends？ -
-
-
- - -
-
-
-
- -
- -
-
-
-
- - - - confirm -
+ + - - - + + content 1 + -
-
- Would you like to be my friends？ -
-
-
- - -
-
-
-
-
-
- -
-`; - -exports[`csr snapshot test > csr test ./src/config-provider/_example/global.vue 1`] = ` -
-
-

- 使用 - - t-config-provider - - 包裹业务功能的最外层组件，点击下方图标查看示例代码 -

-
-
-

- 英文语言包引入路径： - - import enConfig from 'tdesign-vue/es/locale/en_US'; - -

-
-
-

- 中文语言包引入路径： - - import zhConfig from 'tdesign-vue/es/locale/zh_CN'; - -

-
-
-

- 日文语言包引入路径： - - import jpConfig from 'tdesign-vue/es/locale/ja_JP'; - -

-
-
-

- 韩文语言包引入路径： - - import koConfig from 'tdesign-vue/es/locale/ko_KR'; - -

-
-
-`; - -exports[`csr snapshot test > csr test ./src/config-provider/_example/input.vue 1`] = ` -
-
- - - - - - -
-
-`; - -exports[`csr snapshot test > csr test ./src/config-provider/_example/others.vue 1`] = ` -
-
-
-
- -
-
-
-
-
+
-
-
-
-
-
-
- -
-
-
-
-
- - - - - -
-
-
-
-
-
-
-
-
-
-
-
- - - 0 / 20 - -
- -
-
-
-
-
- - - - - - -
-
-
-
-
- -
-
-
-
- 00:00:00 -
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-`; - -exports[`csr snapshot test > csr test ./src/date-picker/_example/quarter.vue 1`] = ` -
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
- - -
-
-
- -
-
- - - - - -
-
-
-
-
-
-`; - -exports[`csr snapshot test > csr test ./src/date-picker/_example/week.vue 1`] = ` -
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
- - -
-
-
- -
-
- - - - - -
-
-
-
-
-
-`; - -exports[`csr snapshot test > csr test ./src/date-picker/_example/year.vue 1`] = ` -
-
-
-
-
-
-
- - - - - - -
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
- - -
-
-
- -
-
- - - - - -
-
-
-
-
-
-`; - -exports[`csr snapshot test > csr test ./src/descriptions/_example/base.vue 1`] = ` -
-
- Shipping address -
- - - - - - - -
- - - -
- - - -
-
-`; - -exports[`csr snapshot test > csr test ./src/descriptions/_example/bordered.vue 1`] = ` -
-
- Shipping address -
- - - - - - - -
- - - - - -
- -
-
-`; - -exports[`csr snapshot test > csr test ./src/descriptions/_example/colon.vue 1`] = ` -
-
- -
-
-
-
- Shipping address -
- - - - - - - -
- - - - - -
- -
-
-
-
-`; - -exports[`csr snapshot test > csr test ./src/descriptions/_example/column.vue 1`] = ` -
-
-
- - - -
-
-
-
- - - - - - - -
- - - -
- - - -
-
-
-
-`; - -exports[`csr snapshot test > csr test ./src/descriptions/_example/custom-style.vue 1`] = ` -
-
- Shipping address -
- - - - - - - -
- - - - - -
- -
-
-`; - -exports[`csr snapshot test > csr test ./src/descriptions/_example/items.vue 1`] = ` -
-
- Shipping address -
- - - - - - - - - -
- Name - - TDesign - -
-
- Shipping address -
- - - - - - - -
- - - -
- - - -
-
- 		- 139****0609 -
-
-`; - -exports[`csr snapshot test > csr test ./src/descriptions/_example/layout.vue 1`] = ` -
-
-
- - layout： - -
- - -
-
-
-
-
- - itemLayout： - -
- - -
-
-
-
-
-
- Shipping address -
- - - - - - - -
- - - - - -
- -
-
-
-
-`; - -exports[`csr snapshot test > csr test ./src/descriptions/_example/size.vue 1`] = ` -
-
-
- - - -
-
-
-
- - - - - - - -
- - - - - -
- -
-
-
-
-`; - -exports[`csr snapshot test > csr test ./src/dialog/_example/async.vue 1`] = ` -
-
-
- -
-
- -
-
- - -`; - -exports[`csr snapshot test > csr test ./src/dialog/_example/attach.vue 1`] = ` -
-
-
- -
-
- -
-
- -
-
- -
-
- - -