feat: refact menu by popup (Tencent#2461)

* feat: refact menu by popup * fix: head menu popup position * fix: menu popup mouse enter bug in * fix: tooltip pop menu level logic * test: update snapshot * feat: render by <a> in href menu item * feat: scroll style move to less * test: update snapshot * feat: update common * feat: update common * feat: update common * fix: head popup menu position
KMethod · Aug 25, 2023 · e925394 · e925394
1 parent 6d7322b
commit e925394
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 67 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/menu/__tests__/__snapshots__/menu-item.test.jsx.snap b/src/menu/__tests__/__snapshots__/menu-item.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`MenuItem > props > :disabled 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-is-disabled t-menu__item--plain"
@@ -32,7 +32,7 @@ exports[`MenuItem > props > :name 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-menu__item--plain"
@@ -56,7 +56,7 @@ exports[`MenuItem > props > :route 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-menu__item--plain"
@@ -80,7 +80,7 @@ exports[`MenuItem > slot > <default> 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-menu__item--plain"
@@ -103,7 +103,7 @@ exports[`MenuItem > slot > <icon> 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-menu__item--plain"

diff --git a/src/menu/__tests__/__snapshots__/menu.test.jsx.snap b/src/menu/__tests__/__snapshots__/menu.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`Menu > props > :active 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -24,7 +24,7 @@ exports[`Menu > props > :collapsed 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -40,7 +40,7 @@ exports[`Menu > props > :collapsedWidth 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -56,7 +56,7 @@ exports[`Menu > props > :height 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -71,7 +71,7 @@ exports[`Menu > props > :theme 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -86,7 +86,7 @@ exports[`Menu > props > :theme 2`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -101,7 +101,7 @@ exports[`Menu > props > :width 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -116,7 +116,7 @@ exports[`Menu > slot > <default> 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <div />
     </ul>
@@ -138,7 +138,7 @@ exports[`Menu > slot > <logo> 1`] = `
       <div />
     </div>
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -153,7 +153,7 @@ exports[`Menu > slot > <options> 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
     <div
       class="t-menu__operations"

diff --git a/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap b/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap
@@ -18,7 +18,7 @@ exports[`Submenu > slot > <default> 1`] = `
   class="t-submenu"
 >
   <div
-    class="t-menu__item"
+    class="t-menu__item t-menu__item-spacer t-menu__item-spacer--right"
   >
     <span
       class="t-menu__content"
@@ -54,7 +54,7 @@ exports[`Submenu > slot > <icon> 1`] = `
   class="t-submenu"
 >
   <div
-    class="t-menu__item"
+    class="t-menu__item t-menu__item-spacer t-menu__item-spacer--right"
   >
     <div />
     <span
@@ -73,7 +73,7 @@ exports[`Submenu > slot > <title> 1`] = `
   class="t-submenu"
 >
   <div
-    class="t-menu__item"
+    class="t-menu__item t-menu__item-spacer t-menu__item-spacer--right"
   >
     <span
       class="t-menu__content"

diff --git a/src/menu/_example/single-side.vue b/src/menu/_example/single-side.vue
@@ -4,7 +4,7 @@
       <template #logo>
         <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
       </template>
-      <t-menu-item value="item1">仪表盘</t-menu-item>
+      <t-menu-item value="item1" href="/vue" target="_blank">仪表盘</t-menu-item>
       <t-menu-item value="item2">资源列表</t-menu-item>
       <t-menu-item value="item3">根目录</t-menu-item>
       <t-menu-item value="item4" :disabled="true">调度平台</t-menu-item>

diff --git a/src/menu/const.ts b/src/menu/const.ts
@@ -1,7 +1,13 @@
 import { Ref } from '@vue/composition-api';
+import { TNode } from '../common';
 import { MenuValue } from './type';
 import VMenu from './v-menu';
 
+export interface TdMenuItem {
+  value: MenuValue;
+  label: TNode;
+}
+
 export type TdOpenType = 'add' | 'remove';
 export interface TdMenuInterface {
   activeValue: Ref<MenuValue>;
@@ -17,6 +23,9 @@ export interface TdMenuInterface {
 }
 
 export interface TdSubMenuInterface {
-  value: MenuValue;
+  value?: MenuValue;
   hasIcon?: boolean;
+  addMenuItem?: (item: TdMenuItem) => void;
+  setSubPopup?: (popupRef: HTMLElement) => void;
+  closeParentPopup?: (e: MouseEvent) => void;
 }
diff --git a/src/menu/menu-item.tsx b/src/menu/menu-item.tsx
@@ -34,14 +34,13 @@ export default defineComponent({
       },
     ]);
     // methods
-    const handleClick = () => {
+    const handleClick = (e: MouseEvent) => {
+      e.stopPropagation();
       if (props.disabled) return;
       menu.select(props.value);
       ctx.emit('click');
 
-      if (props.href) {
-        window.open(props.href, props.target);
-      } else if (props.to) {
+      if (props.to) {
         const router = props.router || (ctx.root as Record<string, any>).$router;
         const methods: string = props.replace ? 'replace' : 'push';
         router[methods](props.to).catch((err: Error) => {
@@ -84,11 +83,17 @@ export default defineComponent({
         onClick={this.handleClick}
       >
         {renderTNodeJSX(this, 'icon')}
-        <span class={[`${this.classPrefix}-menu__content`]}>{renderContent(this, 'default', 'content')}</span>
+        {this.href ? (
+          <a href={this.href} target={this.target} class={`${this.classPrefix}-menu__item-link`}>
+            <span class={`${this.classPrefix}-menu__content`}>{renderContent(this, 'default', 'content')}</span>
+          </a>
+        ) : (
+          <span class={[`${this.classPrefix}-menu__content`]}>{renderContent(this, 'default', 'content')}</span>
+        )}
       </li>
     );
     // 菜单收起，且只有本身为一级菜单才需要显示 tooltip
-    if (this.collapsed && !/submenu/i.test(this.$parent.$vnode?.tag)) {
+    if (this.collapsed && /tmenu/i.test(this.$parent.$vnode?.tag)) {
       return (
         <Tooltip content={() => renderContent(this, 'default', 'content')} placement="right">
           {liContent}

diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx
@@ -29,11 +29,7 @@ export default defineComponent({
         [`${classPrefix.value}-is-collapsed`]: props.collapsed,
       },
     ]);
-    const innerClasses = computed(() => [
-      `${classPrefix.value}-menu`,
-      { [`${classPrefix.value}-menu--scroll`]: mode.value !== 'popup' },
-      'narrow-scrollbar',
-    ]);
+    const innerClasses = computed(() => [`${classPrefix.value}-menu`, `${classPrefix.value}-menu--scroll`]);
     const expandWidth = computed(() => {
       const { width } = props;
       const format = (val: string | number) => (typeof val === 'number' ? `${val}px` : val);