diff --git a/src/dropdown-menu/dropdown-item-props.ts b/src/dropdown-menu/dropdown-item-props.ts index 35167d8a3..6f851abee 100644 --- a/src/dropdown-menu/dropdown-item-props.ts +++ b/src/dropdown-menu/dropdown-item-props.ts @@ -35,6 +35,15 @@ export default { type: [String, Number] as PropType, default: 1, }, + /** 复选框和内容相对位置,仅单选菜单栏有效 */ + placement: { + type: String as PropType, + default: 'left' as TdDropdownItemProps['placement'], + validator(val: TdDropdownItemProps['placement']): boolean { + if (!val) return true; + return ['left', 'right'].includes(val); + }, + }, /** 选中值 */ value: { type: [String, Number, Array] as PropType, diff --git a/src/dropdown-menu/dropdown-item.tsx b/src/dropdown-menu/dropdown-item.tsx index 2b1fd102d..37657d0a9 100644 --- a/src/dropdown-menu/dropdown-item.tsx +++ b/src/dropdown-menu/dropdown-item.tsx @@ -5,7 +5,7 @@ import TButton from '../button'; import TPopup from '../popup'; import TCheckbox, { CheckboxGroup as TCheckboxGroup } from '../checkbox'; import { useVModel, uniqueFactory, getWindowSize } from '../shared'; -import DropdownItemProps from './dropdown-item-props'; +import props from './dropdown-item-props'; import { DropdownMenuState, DropdownMenuControl } from './context'; import { TdDropdownMenuProps, DropdownValue } from './type'; import { KeysType } from '../common'; @@ -18,8 +18,8 @@ const getUniqueID = uniqueFactory('dropdown-popup'); export default defineComponent({ name: `${prefix}-dropdown-item`, - components: { TRadio, TButton, TPopup, TCheckbox, TRadioGroup, TCheckboxGroup }, - props: DropdownItemProps, + components: { TPopup }, + props, emits: ['change', 'open', 'opened', 'close', 'closed', 'update:value', 'update:modelValue'], setup(props) { const dropdownItemClass = usePrefixClass('dropdown-item'); @@ -211,14 +211,14 @@ export default defineComponent({ if (!multiple.value) { // 单选列表 return ( - {(options.value || []).map((option) => ( - ))} - + ); } // 多选列表 return ( - {(options.value || []).map((option) => ( - ))} - + ); }; @@ -258,22 +258,22 @@ export default defineComponent({ if (multiple.value) { return (
- {globalConfig.value.reset} - - + {globalConfig.value.confirm} - +
); } diff --git a/src/dropdown-menu/dropdown-menu.en-US.md b/src/dropdown-menu/dropdown-menu.en-US.md index ac2a46597..6a3cbc766 100644 --- a/src/dropdown-menu/dropdown-menu.en-US.md +++ b/src/dropdown-menu/dropdown-menu.en-US.md @@ -24,6 +24,7 @@ label | String | - | \- | N multiple | Boolean | false | \- | N options | Array | [] | Typescript:`Array` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N optionsColumns | String / Number | 1 | \- | N +placement | String | left | options: left/right | N value | String / Number / Array | undefined | `v-model` and `v-model:value` is supported。Typescript:`DropdownValue ` `type DropdownValue = string \| number \| Array;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript:`DropdownValue ` `type DropdownValue = string \| number \| Array;`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N onChange | Function | | Typescript:`(value: DropdownValue) => void`
| N diff --git a/src/dropdown-menu/dropdown-menu.md b/src/dropdown-menu/dropdown-menu.md index 67e6a39a2..f80cd3ead 100644 --- a/src/dropdown-menu/dropdown-menu.md +++ b/src/dropdown-menu/dropdown-menu.md @@ -24,6 +24,7 @@ label | String | - | 标题 | N multiple | Boolean | false | 是否多选 | N options | Array | [] | 选项数据。TS 类型:`Array` `interface DropdownOption { label: string; disabled: boolean; value: DropdownValue; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N optionsColumns | String / Number | 1 | 选项分栏(1-3) | N +placement | String | left | 复选框和内容相对位置,仅单选菜单栏有效。可选项:left/right | N value | String / Number / Array | undefined | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型:`DropdownValue ` `type DropdownValue = string \| number \| Array;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N defaultValue | String / Number / Array | undefined | 选中值。非受控属性。TS 类型:`DropdownValue ` `type DropdownValue = string \| number \| Array;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N onChange | Function | | TS 类型:`(value: DropdownValue) => void`
值改变时触发 | N diff --git a/src/dropdown-menu/dropdown-menu.tsx b/src/dropdown-menu/dropdown-menu.tsx index 2946935bc..70ae9bceb 100644 --- a/src/dropdown-menu/dropdown-menu.tsx +++ b/src/dropdown-menu/dropdown-menu.tsx @@ -61,7 +61,7 @@ export default defineComponent({ // 通过 slots.default 子成员,计算标题栏选项 const menuTitles = computed(() => menuItems.value.map((item: any, index: number) => { - const { keys, label, value, modelValue, defaultValue, disabled, options } = item.props; + const { keys, label, value, modelValue, defaultValue, disabled, options } = item.props as TdDropdownItemProps; const currentValue = value || modelValue || defaultValue; const target = options?.find((item: any) => item[keys?.value ?? 'value'] === currentValue); if (state.itemsLabel.length < index + 1) { @@ -152,7 +152,8 @@ export default defineComponent({ expandMenu, collapseMenu, emitEvents(emit: string, trigger?: TriggerSource) { - props[`on${camelCase(emit)}`]?.(trigger); + const eventHandler = props[`on${camelCase(emit)}` as keyof typeof props] as Function; + eventHandler?.(trigger); }, }; // 提供子组件访问 diff --git a/src/dropdown-menu/type.ts b/src/dropdown-menu/type.ts index 9ce1ea80d..cf0013362 100644 --- a/src/dropdown-menu/type.ts +++ b/src/dropdown-menu/type.ts @@ -68,6 +68,11 @@ export interface TdDropdownItemProps { * @default 1 */ optionsColumns?: string | number; + /** + * 复选框和内容相对位置,仅单选菜单栏有效 + * @default left + */ + placement?: 'left' | 'right'; /** * 选中值 */