diff --git a/src/dropdown-menu/dropdown-menu.tsx b/src/dropdown-menu/dropdown-menu.tsx index 276aa4a21..91cab15f4 100644 --- a/src/dropdown-menu/dropdown-menu.tsx +++ b/src/dropdown-menu/dropdown-menu.tsx @@ -15,6 +15,7 @@ import { useExpose } from '../shared'; import { findRelativeRect, findRelativeContainer } from './dom-utils'; import { useContent } from '../hooks/tnode'; import DropdownMenuProps from './props'; +import { TdDropdownItemProps } from './type'; const { prefix } = config; const name = `${prefix}-dropdown-menu`; @@ -65,11 +66,13 @@ export default defineComponent({ state.itemsLabel.push(computedLabel); return { + labelProps: label, // 优先级： label属性 > 选中项 label: computedLabel, disabled: disabled !== undefined && disabled !== false, }; } return { + labelProps: label, label: label || target.label, disabled: disabled !== undefined && disabled !== false, }; @@ -177,12 +180,14 @@ export default defineComponent({ return (
- {(menuTitles.value || []).map((item: { label: any }, idx: number) => ( -
expandMenu(item, idx)}> -
{item.label}
- {renderDownIcon(item, idx)} -
- ))} + {(menuTitles.value || []).map( + (item: { label: any; labelProps: TdDropdownItemProps['label'] }, idx: number) => ( +
expandMenu(item, idx)}> +
{item.labelProps || item.label}
+ {renderDownIcon(item, idx)} +
+ ), + )} {defaultSlot}
); diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md index 38352216c..bd1431921 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 @@ -9,8 +10,8 @@ attach | String / Function | 'body' | Typescript：`AttachNode`。[see more ts d closeBtn | Boolean / Slot / Function | - | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N closeOnOverlayClick | Boolean | true | \- | N destroyOnClose | Boolean | false | \- | N -overlayProps | Object | {} | \- | N -placement | String | top | options：top/left/right/bottom/center | N +overlayProps | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/popup/type.ts) | N +placement | String | top | options: top/left/right/bottom/center | N preventScrollThrough | Boolean | true | \- | N showOverlay | Boolean | true | \- | N transitionName | String | - | \- | N @@ -33,10 +34,10 @@ open | \- | \- opened | \- | \- visible-change | `(visible: boolean, trigger: PopupSource) ` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/popup/type.ts)。
`type PopupSource = 'close-btn' \| 'overlay'`
- ### CSS Variables + The component provides the following CSS variables, which can be used to customize styles. Name | Default Value | Description -- | -- | -- --td-popup-bg-color | @bg-color-container | - ---td-popup-border-radius | @radius-default | - +--td-popup-border-radius | @radius-default | - \ No newline at end of file diff --git a/src/popup/popup.md b/src/popup/popup.md index 7ca162612..3ad98a0df 100644 --- a/src/popup/popup.md +++ b/src/popup/popup.md @@ -1,15 +1,16 @@ :: BASE_DOC :: ## API + ### Popup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- attach | String / Function | 'body' | 制定挂载节点。数据类型为 String 时，会被当作选择器处理，进行节点查询。示例：'body' 或 () => document.body。TS 类型：`AttachNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N closeBtn | Boolean / Slot / Function | - | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N closeOnOverlayClick | Boolean | true | 点击遮罩层是否关闭 | N destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N -overlayProps | Object | {} | 遮罩层的属性，透传至 overlay | N +overlayProps | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/popup/type.ts) | N placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N preventScrollThrough | Boolean | true | 是否阻止背景滚动 | N showOverlay | Boolean | true | 是否显示遮罩层 | N @@ -33,10 +34,10 @@ open | \- | 组件准备展示时触发 opened | \- | 组件展示且动画结束后执行 visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/popup/type.ts)。
`type PopupSource = 'close-btn' \| 'overlay'`
- ### CSS Variables + 组件提供了下列 CSS 变量，可用于自定义样式。 名称 | 默认值 | 描述 -- | -- | -- --td-popup-bg-color | @bg-color-container | - ---td-popup-border-radius | @radius-default | - +--td-popup-border-radius | @radius-default | - \ No newline at end of file diff --git a/src/popup/props.ts b/src/popup/props.ts index 41b757ec8..2c05752ef 100644 --- a/src/popup/props.ts +++ b/src/popup/props.ts @@ -32,13 +32,13 @@ export default { /** 浮层出现位置 */ placement: { type: String as PropType, - // default: 'top' as TdPopupProps['placement'], + default: 'top' as TdPopupProps['placement'], validator(val: TdPopupProps['placement']): boolean { if (!val) return true; return ['top', 'left', 'right', 'bottom', 'center'].includes(val); }, }, - /** 防止滚动穿透 */ + /** 是否阻止背景滚动 */ preventScrollThrough: { type: Boolean, default: true, diff --git a/src/popup/type.ts b/src/popup/type.ts index 9ff0e0cb0..e3a6f5c76 100644 --- a/src/popup/type.ts +++ b/src/popup/type.ts @@ -4,6 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ +import { OverlayProps } from '../overlay'; import { TNode, AttachNode } from '../common'; export interface TdPopupProps { @@ -30,14 +31,14 @@ export interface TdPopupProps { * 遮罩层的属性，透传至 overlay * @default {} */ - overlayProps?: object; + overlayProps?: OverlayProps; /** * 浮层出现位置 * @default top */ - placement?: 'top' | 'left' | 'right' | 'bottom' | 'center' | ''; + placement?: 'top' | 'left' | 'right' | 'bottom' | 'center'; /** - * 防止滚动穿透 + * 是否阻止背景滚动 * @default true */ preventScrollThrough?: boolean;