refactor(menu): component optimization

.vscode/settings.json

@@ -32,7 +32,9 @@
     "precaching",
     "tdesign",
     "tdoc",
+    "tmenu",
     "tnode",
+    "vnode",
     "wechat"
   ]
 }

packages/components/menu/const.ts → packages/components/menu/consts/index.ts

@@ -1,6 +1,6 @@
 import { Ref, VNodeNormalizedChildren } from 'vue';
-import { MenuValue } from './type';
-import VMenu from './v-menu';
+import { MenuValue } from '../type';
+import { VMenu } from '../utils';
 
 export interface TdMenuItem {
   value: MenuValue;

packages/components/menu/head-menu.tsx

@@ -20,10 +20,10 @@ import { isArray } from 'lodash-es';
 import log from '@tdesign/common-js/log/log';
 import props from './head-menu-props';
 import { MenuValue } from './type';
-import { TdMenuInterface, TdOpenType } from './const';
+import { TdMenuInterface, TdOpenType } from './consts';
 import { Tabs, TabPanel } from '../tabs';
 import Submenu from './submenu';
-import VMenu from './v-menu';
+import { VMenu } from './utils';
 
 import { usePrefixClass } from '../hooks/useConfig';
 import useVModel from '../hooks/useVModel';

packages/components/menu/menu-group.tsx

@@ -1,23 +1,19 @@
 import { defineComponent } from 'vue';
 import props from './menu-group-props';
-import { renderTNodeJSX } from '../utils/render-tnode';
 import { usePrefixClass } from '../hooks/useConfig';
+import { useTNodeJSX } from '../hooks/tnode';
 
 export default defineComponent({
   name: 'TMenuGroup',
   props,
   setup() {
     const classPrefix = usePrefixClass();
-    return {
-      classPrefix,
-    };
-  },
-  render() {
-    const { classPrefix } = this;
-    return (
-      <div class={`${classPrefix}-menu-group`}>
-        <div class={`${classPrefix}-menu-group__title`}>{renderTNodeJSX(this, 'title', { silent: false })}</div>
-        {renderTNodeJSX(this, 'default')}
+    const renderTNodeJSX = useTNodeJSX();
+
+    return () => (
+      <div class={`${classPrefix.value}-menu-group`}>
+        <div class={`${classPrefix.value}-menu-group__title`}>{renderTNodeJSX('title', { silent: false })}</div>
+        {renderTNodeJSX('default')}
       </div>
     );
   },

packages/components/menu/menu-item.tsx

@@ -1,8 +1,7 @@
 import { defineComponent, computed, inject, onMounted, ref, toRefs, getCurrentInstance } from 'vue';
 import props from './menu-item-props';
-import { TdMenuInterface, TdSubMenuInterface } from './const';
-import { renderContent, renderTNodeJSX } from '../utils/render-tnode';
-import { emitEvent } from '../utils/event';
+import { TdMenuInterface, TdSubMenuInterface } from './consts';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
 import useRipple from '../hooks/useRipple';
 import { usePrefixClass } from '../hooks/useConfig';
 import Tooltip from '../tooltip';
@@ -12,10 +11,15 @@ export default defineComponent({
   props,
   emits: ['click'],
   setup(props, ctx) {
-    const { href, target } = toRefs(props);
+    const { href, target, to, disabled, value, onClick, routerLink, replace } = toRefs(props);
     const classPrefix = usePrefixClass();
+    const renderTNodeJSX = useTNodeJSX();
+    const renderContent = useContent();
+
     const menu = inject<TdMenuInterface>('TdMenu');
     const itemRef = ref<HTMLElement>();
+    const instance = getCurrentInstance();
+
     useRipple(itemRef);
     const submenu = inject<TdSubMenuInterface>('TdSubmenu', null);
     const active = computed(() => menu.activeValue.value === props.value);
@@ -29,33 +33,17 @@ export default defineComponent({
         [`${classPrefix.value}-submenu__item`]: !!submenu && !menu.isHead,
       },
     ]);
-    // lifetimes
-    onMounted(() => {
-      menu?.vMenu?.add({ value: props.value, parent: submenu?.value, vnode: ctx.slots.default, ...props });
-    });
+    const router = computed(() => props.router || instance?.proxy.$router);
 
-    return {
-      classPrefix,
-      menu,
-      active,
-      collapsed,
-      classes,
-      itemRef,
-      href,
-      target,
-      submenu,
-    };
-  },
-  methods: {
-    handleClick(e: MouseEvent) {
+    const handleClick = (e: MouseEvent) => {
       e.stopPropagation();
-      if (this.disabled) return;
-      this.menu.select(this.value);
-      emitEvent(this, 'click', { e, value: this.value });
-      if (this.to || (this.routerLink && this.href)) {
-        const router = this.router || this.$router;
-        const methods: string = this.replace ? 'replace' : 'push';
-        router[methods](this.to || this.href).catch((err: Error) => {
+      if (disabled.value) return;
+      menu.select(value.value);
+      ctx.emit('click', { e, value: value.value });
+      onClick.value?.({ e, value: value.value });
+      if (to.value || (routerLink.value && href.value)) {
+        const methods: string = replace.value ? 'replace' : 'push';
+        router.value[methods](to.value || href.value).catch((err: Error) => {
           // vue-router 3.1.0+ push/replace cause NavigationDuplicated error
           // https://github.com/vuejs/vue-router/issues/2872
           // 当前path和目标path相同时，会抛出NavigationDuplicated的错误
@@ -67,47 +55,52 @@ export default defineComponent({
           }
         });
       }
-      this.submenu?.closeParentPopup?.(e);
-    },
-  },
-  render() {
-    const liContent = (
-      <li ref="itemRef" class={this.classes} onClick={this.handleClick}>
-        {renderTNodeJSX(this, 'icon')}
-        {this.routerLink ? (
-          <a
-            href={this.href ? this.href : this.to ? (this.router || this.$router)?.resolve(this.to).href : ''}
-            target={this.target}
-            class={`${this.classPrefix}-menu__item-link`}
-            onClick={(e) => e.preventDefault()}
-          >
-            <span class={`${this.classPrefix}-menu__content`}>{renderContent(this, 'default', 'content')}</span>
-          </a>
-        ) : this.href ? (
-          <a
-            href={this.href}
-            target={this.target}
-            class={`${this.classPrefix}-menu__item-link`}
-            onClick={(e) => this.disabled && e.preventDefault()}
-          >
-            <span class={`${this.classPrefix}-menu__content`}>{renderContent(this, 'default', 'content')}</span>
-          </a>
-        ) : (
-          <span class={`${this.classPrefix}-menu__content`}>{renderContent(this, 'default', 'content')}</span>
-        )}
-      </li>
-    );
+      submenu?.closeParentPopup?.(e);
+    };
 
-    const instance = getCurrentInstance();
-    const node = instance.parent;
-    // 菜单收起，且只有本身为一级菜单才需要显示 tooltip
-    if (this.collapsed && /tmenu/i.test(node?.type.name)) {
-      return (
-        <Tooltip content={() => renderContent(this, 'default', 'content')} placement="right">
-          {liContent}
-        </Tooltip>
+    // lifetimes
+    onMounted(() => {
+      menu?.vMenu?.add({ value: props.value, parent: submenu?.value, vnode: ctx.slots.default, ...props });
+    });
+
+    return () => {
+      const liContent = (
+        <li ref={itemRef} class={classes.value} onClick={handleClick}>
+          {renderTNodeJSX('icon')}
+          {routerLink.value ? (
+            <a
+              href={href.value ? href.value : to.value ? router.value?.resolve(to.value).href : ''}
+              target={target.value}
+              class={`${classPrefix.value}-menu__item-link`}
+              onClick={(e) => e.preventDefault()}
+            >
+              <span class={`${classPrefix.value}-menu__content`}>{renderContent('default', 'content')}</span>
+            </a>
+          ) : href.value ? (
+            <a
+              href={href.value}
+              target={target.value}
+              class={`${classPrefix.value}-menu__item-link`}
+              onClick={(e) => disabled.value && e.preventDefault()}
+            >
+              <span class={`${classPrefix.value}-menu__content`}>{renderContent('default', 'content')}</span>
+            </a>
+          ) : (
+            <span class={`${classPrefix.value}-menu__content`}>{renderContent('default', 'content')}</span>
+          )}
+        </li>
       );
-    }
-    return liContent;
+
+      const node = instance?.parent;
+      // 菜单收起，且只有本身为一级菜单才需要显示 tooltip
+      if (collapsed.value && /tmenu/i.test(node?.type.name)) {
+        return (
+          <Tooltip content={() => renderContent('default', 'content')} placement="right">
+            {liContent}
+          </Tooltip>
+        );
+      }
+      return liContent;
+    };
   },
 });

packages/components/menu/menu.tsx

@@ -1,9 +1,9 @@
 import { defineComponent, ref, computed, provide, watchEffect, watch, onMounted, toRefs } from 'vue';
 import props from './props';
 import { MenuValue } from './type';
-import { TdMenuInterface, TdOpenType } from './const';
-import { renderContent, renderTNodeJSX } from '../utils/render-tnode';
-import VMenu from './v-menu';
+import { TdMenuInterface, TdOpenType } from './consts';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
+import { VMenu } from './utils';
 import log from '@tdesign/common-js/log/log';
 import { usePrefixClass } from '../hooks/useConfig';
 import useVModel from '../hooks/useVModel';
@@ -16,11 +16,8 @@ export default defineComponent({
   props: { ...props, onCollapsed: Function },
   setup(props, ctx) {
     const classPrefix = usePrefixClass();
-    watchEffect(() => {
-      if (ctx.slots.options) {
-        log.warnOnce('TMenu', '`options` slot is going to be deprecated, please use `operations` for slot instead.');
-      }
-    });
+    const renderTNodeJSX = useTNodeJSX();
+    const renderContent = useContent();
     const mode = ref(props.expandType);
     const theme = computed(() => props.theme);
     const isMutex = computed(() => props.expandMutex);
@@ -88,13 +85,13 @@ export default defineComponent({
       },
     });
 
-    // watch
     watch(
       () => props.expanded,
       (value) => {
         vMenu.expandValues = new Set(value);
       },
     );
+
     watch(
       () => props.collapsed,
       (newValue, oldValue) => {
@@ -105,37 +102,33 @@ export default defineComponent({
       },
     );
 
-    const updateActiveValues = (value: MenuValue) => {
+    watch(activeValue, (value: MenuValue) => {
       activeValues.value = vMenu.select(value);
-    };
-    watch(activeValue, updateActiveValues);
+    });
+
+    watchEffect(() => {
+      if (ctx.slots.options) {
+        log.warnOnce('TMenu', '`options` slot is going to be deprecated, please use `operations` for slot instead.');
+      }
+    });
 
-    // timelifes
     onMounted(() => {
       activeValues.value = vMenu.select(activeValue.value);
     });
 
-    return {
-      styles,
-      classPrefix,
-      menuClass,
-      innerClasses,
-      activeValue,
-      activeValues,
-      expandValues,
-    };
-  },
-  render() {
-    const operations = renderContent(this, 'operations', 'options');
-    const logo = renderTNodeJSX(this, 'logo');
-    return (
-      <div class={this.menuClass} style={this.styles}>
-        <div class={`${this.classPrefix}-default-menu__inner`}>
-          {logo && <div class={`${this.classPrefix}-menu__logo`}>{logo}</div>}
-          <ul class={this.innerClasses}>{renderContent(this, 'default', 'content')}</ul>
-          {operations && <div class={`${this.classPrefix}-menu__operations`}>{operations}</div>}
+    return () => {
+      const operations = renderContent('operations', 'options');
+      const logo = renderTNodeJSX('logo');
+
+      return (
+        <div class={menuClass.value} style={styles.value}>
+          <div class={`${classPrefix.value}-default-menu__inner`}>
+            {logo && <div class={`${classPrefix.value}-menu__logo`}>{logo}</div>}
+            <ul class={innerClasses.value}>{renderContent('default', 'content')}</ul>
+            {operations && <div class={`${classPrefix.value}-menu__operations`}>{operations}</div>}
+          </div>
         </div>
-      </div>
-    );
+      );
+    };
   },
 });