feat(dropdown):使用compositionAPI重构dropdown组件

examples/dropdown/demos/custom.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <t-dropdown
-      :options="options"
-      placement="top-left"
-      trigger="click"
-      :hide-after-item-click="false"
-      :min-column-width="100"
-    >
+    <t-dropdown :options="options" trigger="click" :hide-after-item-click="false" :min-column-width="100">
       <t-button variant="text"> 下拉菜单 </t-button>
     </t-dropdown>
   </div>

src/dropdown/const.ts

@@ -0,0 +1,9 @@
+import { InjectionKey } from 'vue';
+import { DropdownOption } from './type';
+
+export const injectKey: InjectionKey<{
+  handleMenuClick: (data: DropdownOption, context: { e: MouseEvent }) => void;
+  maxHeight: number;
+  maxColumnWidth: number | string;
+  minColumnWidth: number | string;
+}> = Symbol('dropdownProvider');

src/dropdown/dropdown-item.tsx

@@ -1,24 +1,15 @@
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, inject } from 'vue';
 import { ChevronRightIcon } from 'tdesign-icons-vue-next';
 import TDivider from '../divider';
 import itemProps from './dropdown-item-props';
-import { renderContent } from '../utils/render-tnode';
 import { TNodeReturnValue } from '../common';
-import { emitEvent } from '../utils/event';
 import useRipple from '../hooks/useRipple';
 import { useCommonClassName, usePrefixClass } from '../hooks/useConfig';
+import { useContent } from '../hooks/tnode';
+import { injectKey } from './const';
 
 export default defineComponent({
   name: 'TDropdownItem',
-  components: {
-    ChevronRightIcon,
-    TDivider,
-  },
-  inject: {
-    dropdown: {
-      default: undefined,
-    },
-  },
   props: {
     ...itemProps,
     path: {
@@ -29,60 +20,64 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    onHover: {
+      type: Function,
+    },
   },
-  emits: ['click', 'item-hover', 'hover'],
-  setup() {
+  setup(props) {
+    const renderContent = useContent();
     const itemRef = ref<HTMLElement>();
     useRipple(itemRef);
 
     const { STATUS } = useCommonClassName();
     const COMPONENT_NAME = usePrefixClass('dropdown__item');
     const classPrefix = usePrefixClass();
 
-    return { classPrefix, COMPONENT_NAME, STATUS, itemRef };
-  },
-  methods: {
-    renderSuffix(): TNodeReturnValue {
-      return this.hasChildren ? <chevron-right-icon class={`${this.COMPONENT_NAME}__item-icon`} /> : null;
-    },
-    handleItemClick(e: MouseEvent): void {
+    const dropdownProvider = inject(injectKey);
+    const { handleMenuClick } = dropdownProvider;
+
+    const renderSuffix = (): TNodeReturnValue => {
+      return props.hasChildren ? <ChevronRightIcon class={`${COMPONENT_NAME.value}__item-icon`} /> : null;
+    };
+
+    const handleItemClick = (e: MouseEvent): void => {
       e.stopPropagation();
-      if (!this.hasChildren && !this.disabled) {
+      if (!props.hasChildren && !props.disabled) {
         const data = {
-          value: this.value,
-          path: this.path,
-          content: this.content,
+          value: props.value,
+          path: props.path,
+          content: props.content,
         };
-        emitEvent(this, 'click', data, { e });
-        emitEvent(this, 'item-hover', this.path);
-        this.dropdown.handleMenuClick(data, { e });
+        props.onClick?.(data, { e });
+        handleMenuClick(data, { e });
       }
-    },
-    handleMouseover(): void {
-      emitEvent(this, 'hover', this.path);
-    },
-  },
-  render() {
-    const { STATUS, COMPONENT_NAME, classPrefix } = this;
-    const classes = [
-      COMPONENT_NAME,
-      {
-        [`${classPrefix}-dropdown--suffix`]: this.hasChildren,
-        [STATUS.disabled]: this.disabled,
-        [STATUS.active]: this.active,
-      },
-    ];
+    };
+
+    const handleMouseover = (): void => {
+      props.onHover?.(props.path);
+    };
+
+    return () => {
+      const classes = [
+        COMPONENT_NAME.value,
+        {
+          [`${classPrefix.value}-dropdown--suffix`]: props.hasChildren,
+          [STATUS.value.disabled]: props.disabled,
+          [STATUS.value.active]: props.active,
+        },
+      ];
 
-    return (
-      <div>
-        <div ref="itemRef" class={classes} onClick={this.handleItemClick} onMouseover={this.handleMouseover}>
-          <div class={`${COMPONENT_NAME}-content`}>
-            <span class={`${COMPONENT_NAME}-text`}>{renderContent(this, 'content', 'default')}</span>
+      return (
+        <div>
+          <div ref={itemRef} class={classes} onClick={handleItemClick} onMouseover={handleMouseover}>
+            <div class={`${COMPONENT_NAME.value}-content`}>
+              <span class={`${COMPONENT_NAME.value}-text`}>{renderContent('content', 'default')}</span>
+            </div>
+            {renderSuffix()}
           </div>
-          {this.renderSuffix()}
+          {props.divider ? <TDivider /> : null}
         </div>
-        {this.divider ? <TDivider /> : null}
-      </div>
-    );
+      );
+    };
   },
 });

src/dropdown/dropdown-menu.tsx

@@ -1,22 +1,14 @@
-import { defineComponent, VNode } from 'vue';
+import { defineComponent, VNode, inject, ref } from 'vue';
 import DropdownItem from './dropdown-item';
 import { DropdownOption } from './type';
 import { TNodeReturnValue } from '../common';
-import { renderTNodeJSX } from '../utils/render-tnode';
 import { pxCompat } from '../utils/helper';
-import { emitEvent } from '../utils/event';
 import { usePrefixClass } from '../hooks/useConfig';
+import { useTNodeJSX } from '../hooks/tnode';
+import { injectKey } from './const';
 
 export default defineComponent({
   name: 'TDropdownMenu',
-  components: {
-    DropdownItem,
-  },
-  inject: {
-    dropdown: {
-      default: undefined,
-    },
-  },
   props: {
     options: {
       type: Array,
@@ -27,44 +19,42 @@ export default defineComponent({
       default: 300,
     },
     maxColumnWidth: {
-      type: Number,
+      type: Number || String,
       default: 100,
     },
     minColumnWidth: {
-      type: Number,
+      type: Number || String,
       default: 10,
     },
   },
-  emits: ['click'],
-  setup() {
+  setup(props, { slots }) {
+    const path = ref('');
+    const renderTNode = useTNodeJSX();
     const COMPONENT_NAME = usePrefixClass('dropdown__menu');
-    return {
-      COMPONENT_NAME,
+
+    const dropdownProvider = inject(injectKey);
+    const { maxHeight, maxColumnWidth, minColumnWidth } = dropdownProvider;
+
+    const handleHoverItem = (p: string) => {
+      path.value = p;
     };
-  },
-  data() {
-    return {
-      path: '', // 当前选中路径，形如{/id1/id2/id3}
+
+    const handleItemClick = (data: DropdownOption, context: { e: MouseEvent }, idx: number) => {
+      (props.options as DropdownOption[])[idx].onClick?.(data, context);
+      props.onClick?.(data, context);
     };
-  },
-  methods: {
-    isActive(item: DropdownOption, pathPrefix: string, excludeSelf = true): boolean {
+
+    const isActive = (item: DropdownOption, pathPrefix: string, excludeSelf = true): boolean => {
       const itemPath = `${pathPrefix}/${item.value}`;
-      if (excludeSelf && this.path === itemPath) {
+
+      if (excludeSelf && path.value === itemPath) {
         return false;
       }
-      return this.path.indexOf(itemPath) === 0;
-    },
-    handleHoverItem(path: string) {
-      this.path = path;
-    },
-    handleItemClick(data: DropdownOption, context: { e: MouseEvent }, idx: number) {
-      (this.options as DropdownOption[])[idx].onClick?.(data, context);
-      emitEvent(this, 'click', data, context);
-    },
-    renderMenuColumn(children: Array<DropdownOption>, showSubmenu: boolean, pathPrefix: string): VNode {
-      const menuClass = [`${this.COMPONENT_NAME}-column`, 'narrow-scrollbar', { submenu__visible: showSubmenu }];
-      const { maxHeight, maxColumnWidth, minColumnWidth } = this.dropdown;
+      return path.value.indexOf(itemPath) === 0;
+    };
+
+    const renderMenuColumn = (children: Array<DropdownOption>, showSubmenu: boolean, pathPrefix: string): VNode => {
+      const menuClass = [`${COMPONENT_NAME.value}-column`, 'narrow-scrollbar', { submenu__visible: showSubmenu }];
       return (
         <div
           class={menuClass}
@@ -74,61 +64,65 @@ export default defineComponent({
             minWidth: pxCompat(minColumnWidth),
           }}
         >
-          {children.map((item, idx) => (
-            <DropdownItem
-              key={idx}
-              disabled={item.disabled}
-              active={this.isActive(item, pathPrefix) || item.active}
-              value={item.value}
-              content={item.content}
-              divider={item.divider}
-              hasChildren={item.children && item.children.length > 0}
-              path={`${pathPrefix}/${item.value}`}
-              maxColumnWidth={this.maxColumnWidth}
-              minColumnWidth={this.minColumnWidth}
-              onClick={(data: DropdownOption, context: { e: MouseEvent }) => this.handleItemClick(data, context, idx)}
-              onHover={this.handleHoverItem}
-            />
-          ))}
+          {children.map((item, idx) => {
+            return (
+              <DropdownItem
+                key={idx}
+                disabled={item.disabled}
+                active={isActive(item, pathPrefix) || item.active}
+                value={item.value}
+                content={item.content}
+                divider={item.divider}
+                hasChildren={item.children && item.children.length > 0}
+                path={`${pathPrefix}/${item.value}`}
+                maxColumnWidth={maxColumnWidth}
+                minColumnWidth={minColumnWidth}
+                onHover={handleHoverItem}
+                onClick={(data: DropdownOption, context: { e: MouseEvent }) => handleItemClick(data, context, idx)}
+              />
+            );
+          })}
         </div>
       );
-    },
-  },
-  render() {
-    const { COMPONENT_NAME } = this;
-    const columns: TNodeReturnValue[] = [];
-    let menuItems = this.options as DropdownOption[];
-    let pathPrefix = '';
-    if (this.$slots.default) {
-      return (
-        <div class={COMPONENT_NAME}>
-          <div
-            class={[`${COMPONENT_NAME}-column`, 'narrow-scrollbar']}
-            style={{
-              maxHeight: `${this.dropdown.maxHeight}px`,
-              maxWidth: `${this.dropdown.maxColumnWidth}px`,
-              minWidth: `${this.dropdown.minColumnWidth}px`,
-            }}
-          >
-            {renderTNodeJSX(this, 'default')}
+    };
+
+    return () => {
+      const columns: TNodeReturnValue[] = [];
+      let menuItems = props.options as DropdownOption[];
+      let pathPrefix = '';
+
+      if (slots.default) {
+        return (
+          <div class={COMPONENT_NAME.value}>
+            <div
+              class={[`${COMPONENT_NAME.value}-column`, 'narrow-scrollbar']}
+              style={{
+                maxHeight: `${maxHeight}px`,
+                maxWidth: `${maxColumnWidth}px`,
+                minWidth: `${minColumnWidth}px`,
+              }}
+            >
+              {renderTNode('default')}
+            </div>
           </div>
-        </div>
-      );
-    }
-    // 根据path渲染
-    while (menuItems && menuItems.length) {
-      // eslint-disable-next-line no-loop-func
-      const activeItem = menuItems.find((item) => this.isActive(item, pathPrefix, false));
+        );
+      }
 
-      columns.push(this.renderMenuColumn(menuItems, !!activeItem, pathPrefix));
+      while (menuItems && menuItems.length) {
+        // eslint-disable-next-line no-loop-func
+        const activeItem = menuItems.find((item) => isActive(item, pathPrefix, false));
 
-      if (activeItem) {
-        pathPrefix = `${pathPrefix}/${activeItem.value}`;
-        menuItems = activeItem.children || [];
-      } else {
-        menuItems = [];
+        columns.push(renderMenuColumn(menuItems, !!activeItem, pathPrefix));
+
+        if (activeItem) {
+          pathPrefix = `${pathPrefix}/${activeItem.value}`;
+          menuItems = activeItem.children || [];
+        } else {
+          menuItems = [];
+        }
       }
-    }
-    return <div class={COMPONENT_NAME}>{columns}</div>;
+
+      return <div class={COMPONENT_NAME.value}>{columns}</div>;
+    };
   },
 });