feat(DropdownItem): support placement

src/dropdown-menu/dropdown-item-props.ts

@@ -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']>,

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 (
-            <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}
@@ -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}
@@ -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>
           );
         }

src/dropdown-menu/dropdown-menu.en-US.md

@@ -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

src/dropdown-menu/dropdown-menu.md

@@ -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

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);
       },
     };
     // 提供子组件访问

src/dropdown-menu/type.ts

@@ -68,6 +68,11 @@ export interface TdDropdownItemProps {
    * @default 1
    */
   optionsColumns?: string | number;
+  /**
+   * 复选框和内容相对位置，仅单选菜单栏有效
+   * @default left
+   */
+  placement?: 'left' | 'right';
   /**
    * 选中值
    */