Skip to content

Commit

Permalink
feat(DropdownItem): support placement (#1675)
Browse files Browse the repository at this point in the history
  • Loading branch information
@liweijie0812
liweijie0812 authored Dec 18, 2024
1 parent cdf35f8 commit 452e1fa
Show file tree
Hide file tree
Showing 6 changed files with 33 additions and 16 deletions.
9 changes: 9 additions & 0 deletions src/dropdown-menu/dropdown-item-props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,15 @@ export default {
type: [String, Number] as PropType<TdDropdownItemProps['optionsColumns']>,
default: 1,
},
/** 复选框和内容相对位置，仅单选菜单栏有效 */
placement: {
type: String as PropType<TdDropdownItemProps['placement']>,
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<TdDropdownItemProps['value']>,
Expand Down
28 changes: 14 additions & 14 deletions src/dropdown-menu/dropdown-item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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');
Expand Down Expand Up @@ -211,14 +211,14 @@ export default defineComponent({
if (!multiple.value) {
// 单选列表
return (
<t-radio-group
<TRadioGroup
value={radioSelect.value}
onChange={handleRadioChange}
placement="right"
placement={props.placement}
class={`${dropdownItemClass.value}__radio-group`}
>
{(options.value || []).map((option) => (
<t-radio
<TRadio
key={option.value}
value={option.value}
label={option.label}
Expand All @@ -228,19 +228,19 @@ export default defineComponent({
icon="line"
/>
))}
</t-radio-group>
</TRadioGroup>
);
}
// 多选列表
return (
<t-checkbox-group
<TCheckboxGroup
value={checkSelect.value}
onChange={handleCheckboxChange}
class={`${dropdownItemClass.value}__checkbox-group`}
style={`grid-template-columns: repeat(${props.optionsColumns}, 1fr)`}
>
{(options.value || []).map((option) => (
<t-checkbox
<TCheckbox
key={option.value}
class={`${dropdownItemClass.value}__checkbox-item t-checkbox--tag`}
icon={false}
Expand All @@ -250,30 +250,30 @@ export default defineComponent({
disabled={option.disabled}
/>
))}
</t-checkbox-group>
</TCheckboxGroup>
);
};

const footerSlot = () => {
if (multiple.value) {
return (
<div class={`${dropdownItemClass.value}__footer`}>
<t-button
<TButton
theme="light"
class={`${dropdownItemClass.value}__footer-btn ${dropdownItemClass.value}__reset-btn`}
disabled={isBtnDisabled.value}
onClick={resetSelect}
>
{globalConfig.value.reset}
</t-button>
<t-button
</TButton>
<TButton
theme="primary"
class={`${dropdownItemClass.value}__footer-btn ${dropdownItemClass.value}__confirm-btn`}
disabled={isBtnDisabled.value}
onClick={confirmSelect}
>
{globalConfig.value.confirm}
</t-button>
</TButton>
</div>
);
}
Expand Down
1 change: 1 addition & 0 deletions src/dropdown-menu/dropdown-menu.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ label | String | - | \- | N
multiple | Boolean | false | \- | N
options | Array | [] | Typescript：`Array<DropdownOption>` `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<DropdownValue>;`。[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<DropdownValue>;`。[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`<br/> | N
Expand Down
1 change: 1 addition & 0 deletions src/dropdown-menu/dropdown-menu.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ label | String | - | 标题 | N
multiple | Boolean | false | 是否多选 | N
options | Array | [] | 选项数据。TS 类型：`Array<DropdownOption>` `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<DropdownValue>;`。[详细类型定义](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<DropdownValue>;`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/dropdown-menu/type.ts) | N
onChange | Function | | TS 类型：`(value: DropdownValue) => void`<br/>值改变时触发 | N
Expand Down
5 changes: 3 additions & 2 deletions src/dropdown-menu/dropdown-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
},
};
// 提供子组件访问
Expand Down
5 changes: 5 additions & 0 deletions src/dropdown-menu/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@ export interface TdDropdownItemProps {
* @default 1
*/
optionsColumns?: string | number;
/**
* 复选框和内容相对位置，仅单选菜单栏有效
* @default left
*/
placement?: 'left' | 'right';
/**
* 选中值
*/
Expand Down

0 comments on commit 452e1fa

Please sign in to comment.