fix(dropdown): flat children as item children (#1870)

Tencent · Oct 17, 2022 · 0ea5277 · 0ea5277
1 parent d0316ec
commit 0ea5277
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/src/dropdown/_example/slot.vue b/src/dropdown/_example/slot.vue
@@ -59,7 +59,7 @@
               </t-dropdown-menu>
             </t-dropdown-item>
 
-            <t-dropdown-item :value="2"> 操作二 </t-dropdown-item>
+            <t-dropdown-item :value="2">操作二 </t-dropdown-item>
 
             <t-dropdown-item :value="3">操作三</t-dropdown-item>
           </t-dropdown-menu>
@@ -73,7 +73,7 @@ import { MessagePlugin } from 'tdesign-vue-next';
 
 const clickHandler = (data) => {
   console.log(data, 'data');
-  if (data.value !== 212) MessagePlugin.success(`选中【${data.content}】`);
+  if (data.value !== 212) MessagePlugin.success(`选中【${data.value}】`);
 };
 const handleClick = () => {
   MessagePlugin.success(`点击 操作2-1-2`);

diff --git a/src/dropdown/dropdown-menu.tsx b/src/dropdown/dropdown-menu.tsx
@@ -38,7 +38,8 @@ export default defineComponent({
           renderContent = (
             <div key={idx}>
               <DropdownItem
-                class={[`${dropdownClass.value}__item`, `${dropdownClass.value}__item--suffix`]}
+                style={optionItem.style}
+                class={[`${dropdownClass.value}__item`, `${dropdownClass.value}__item--suffix`, optionItem.class]}
                 value={optionItem.value}
                 theme={optionItem.theme}
                 active={optionItem.active}
@@ -83,7 +84,8 @@ export default defineComponent({
           renderContent = (
             <div key={idx}>
               <DropdownItem
-                class={`${dropdownClass.value}__item`}
+                style={optionItem.style}
+                class={[`${dropdownClass.value}__item`, optionItem.class]}
                 value={optionItem.value}
                 theme={optionItem.theme}
                 active={optionItem.active}

diff --git a/src/dropdown/hooks/useDropdownOptions.ts b/src/dropdown/hooks/useDropdownOptions.ts
@@ -18,18 +18,21 @@ export const getOptionsFromChildren = (menuGroup: any): DropdownOption[] => {
       .map((item) => {
         const groupChildren = item.children?.default?.();
 
-        const contentIdx = groupChildren?.findIndex?.(
-          (v: VNode) => typeof v.children === 'string' && (v.type as { description: string }).description !== 'Comment',
+        // 当前节点的渲染内容
+        const contentCtx = groupChildren?.filter?.(
+          (v: VNode) => !['TDropdownMenu', 'TDropdownItem'].includes((v.type as { name: string })?.name),
         );
-        const childrenContent = groupChildren?.filter?.(
+        // 嵌套菜单的节点
+        const childrenCtx = groupChildren?.filter?.(
           (v: VNode) =>
             typeof v.children !== 'string' &&
             ['TDropdownMenu', 'TDropdownItem'].includes((v.type as { name: string })?.name),
         );
+
         return {
           ...item.props,
-          content: groupChildren?.[contentIdx]?.children || groupChildren,
-          children: childrenContent?.length > 0 ? getOptionsFromChildren(childrenContent) : null,
+          content: contentCtx || groupChildren,
+          children: childrenCtx?.length > 0 ? getOptionsFromChildren(childrenCtx) : null,
         };
       })
       .filter((v) => !!v.content);