feat(components): [menu] add popperOffset and ellipsisIcon props(#14923) (#15051)

* feat(components): [menu] add popperOffset and ellipsisIcon props(#14923)

* Update docs/examples/menu/ellipsis.vue

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* Update docs/en-US/component/menu.md

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* Update docs/en-US/component/menu.md

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

* docs(components): [menu] upgrade props

* Update docs/en-US/component/menu.md

Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

---------

Co-authored-by: zhixiaotong <zhixiaotong.me@qq.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>

docs/en-US/component/menu.md

@@ -51,13 +51,25 @@ menu/collapse
 
 :::
 
+## Popper Offset ^(2.5.0)
+
+Menu with popperOffset will override Submenu's `popper-offset`.
+
+:::demo
+
+menu/popper-offset
+
+:::
+
 ## Menu Attributes
 
 | Name                    | Description                                                                                                                                                           | Type                  | Accepted Values       | Default  |
-| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- | -------- |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------------- | -------- |
 | mode                    | menu display mode                                                                                                                                                     | string                | horizontal / vertical | vertical |
 | collapse                | whether the menu is collapsed (available only in vertical mode)                                                                                                       | boolean               | —                     | false    |
 | ellipsis                | whether the menu is ellipsis (available only in horizontal mode)                                                                                                      | boolean               | —                     | true     |
+| ellipsis-icon^(2.5.0)   | custom ellipsis icon (available only in horizontal mode and ellipsis is true)                                                                                         | `string \| Component` | —                     | —        |
+| popper-offset^(2.5.0)   | offset of the popper (effective for all submenus)                                                                                                                     | number                | —                     | 6        |
 | background-color        | background color of Menu (hex format) (deprecated, use `--bg-color` instead)                                                                                          | string                | —                     | #ffffff  |
 | text-color              | text color of Menu (hex format) (deprecated, use `--text-color` instead)                                                                                              | string                | —                     | #303133  |
 | active-text-color       | text color of currently active menu item (hex format) (deprecated, use `--active-color` instead)                                                                      | string                | —                     | #409EFF  |
@@ -101,7 +113,7 @@ menu/collapse
 | disabled                          | whether the sub-menu is disabled                                                                                                              | boolean               | —               | false                                           |
 | popper-append-to-body(deprecated) | whether to append the popup menu to body. If the positioning of the menu is wrong, you can try setting this prop                              | boolean               | —               | level one SubMenu: true / other SubMenus: false |
 | teleported                        | whether popup menu is teleported to the body                                                                                                  | boolean               | —               | level one SubMenu: true / other SubMenus: false |
-| popper-offset                     | offset of the popper                                                                                                                          | number                | —               | 6                                               |
+| popper-offset                     | offset of the popper (overrides the `popper` of menu)                                                                                         | number                | —               | —                                               |
 | expand-close-icon                 | Icon when menu are expanded and submenu are closed, `expand-close-icon` and `expand-open-icon` need to be passed together to take effect      | `string \| Component` | —               | —                                               |
 | expand-open-icon                  | Icon when menu are expanded and submenu are opened, `expand-open-icon` and `expand-close-icon` need to be passed together to take effect      | `string \| Component` | —               | —                                               |
 | collapse-close-icon               | Icon when menu are collapsed and submenu are closed, `collapse-close-icon` and `collapse-open-icon` need to be passed together to take effect | `string \| Component` | —               | —                                               |

docs/examples/menu/popper-offset.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-menu
+    ellipsis
+    class="el-menu-popper-demo"
+    mode="horizontal"
+    :popper-offset="16"
+    style="width: 600px"
+  >
+    <el-menu-item index="1">Processing Center</el-menu-item>
+    <el-sub-menu index="2">
+      <template #title>Workspace</template>
+      <el-menu-item index="2-1">item one</el-menu-item>
+      <el-menu-item index="2-2">item two</el-menu-item>
+      <el-menu-item index="2-3">item three</el-menu-item>
+      <el-sub-menu index="2-4">
+        <template #title>item four</template>
+        <el-menu-item index="2-4-1">item one</el-menu-item>
+        <el-menu-item index="2-4-2">item two</el-menu-item>
+        <el-menu-item index="2-4-3">item three</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-sub-menu index="3" :popper-offset="8">
+      <template #title>Override Popper Offset</template>
+      <el-menu-item index="3-1">item one</el-menu-item>
+      <el-menu-item index="3-2">item two</el-menu-item>
+      <el-menu-item index="3-3">item three</el-menu-item>
+      <el-sub-menu index="3-4" :popper-offset="20">
+        <template #title>override child</template>
+        <el-menu-item index="3-4-1">item one</el-menu-item>
+        <el-menu-item index="3-4-2">item two</el-menu-item>
+        <el-menu-item index="3-4-3">item three</el-menu-item>
+      </el-sub-menu>
+    </el-sub-menu>
+    <el-menu-item index="4" disabled>Info</el-menu-item>
+    <el-menu-item index="5">Orders</el-menu-item>
+  </el-menu>
+</template>
+
+<script lang="ts" setup></script>

packages/components/menu/src/menu.ts

@@ -19,6 +19,7 @@ import {
   buildProps,
   definePropType,
   flattedChildren,
+  iconPropType,
   isObject,
   isString,
   mutable,
@@ -31,7 +32,12 @@ import { useMenuCssVar } from './use-menu-css-var'
 
 import type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'
 import type { NavigationFailure, Router } from 'vue-router'
-import type { ExtractPropTypes, VNode, VNodeArrayChildren } from 'vue'
+import type {
+  Component,
+  ExtractPropTypes,
+  VNode,
+  VNodeArrayChildren,
+} from 'vue'
 import type { UseResizeObserverReturn } from '@vueuse/core'
 
 export const menuProps = buildProps({
@@ -67,6 +73,14 @@ export const menuProps = buildProps({
     type: Boolean,
     default: true,
   },
+  popperOffset: {
+    type: Number,
+    default: 6,
+  },
+  ellipsisIcon: {
+    type: iconPropType,
+    default: () => More,
+  },
   popperEffect: {
     type: String,
     values: ['dark', 'light'],
@@ -393,6 +407,7 @@ export default defineComponent({
               {
                 index: 'sub-menu-more',
                 class: nsSubMenu.e('hide-arrow'),
+                popperOffset: props.popperOffset,
               },
               {
                 title: () =>
@@ -401,7 +416,9 @@ export default defineComponent({
                     {
                       class: nsSubMenu.e('icon-more'),
                     },
-                    { default: () => h(More) }
+                    {
+                      default: () => h(props.ellipsisIcon as Component),
+                    }
                   ),
                 default: () => slotMore,
               }

packages/components/menu/src/sub-menu.ts

@@ -58,7 +58,7 @@ export const subMenuProps = buildProps({
   },
   popperOffset: {
     type: Number,
-    default: 6,
+    default: undefined,
   },
   expandCloseIcon: {
     type: iconPropType,
@@ -196,6 +196,10 @@ export default defineComponent({
 
     const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1)
 
+    const subMenuPopperOffset = computed(() => {
+      return props.popperOffset ?? rootMenu.props.popperOffset
+    })
+
     // methods
     const doDestroy = () =>
       vPopper.value?.popperRef?.popperInstanceRef?.destroy()
@@ -349,7 +353,7 @@ export default defineComponent({
               visible: opened.value,
               effect: 'light',
               pure: true,
-              offset: props.popperOffset,
+              offset: subMenuPopperOffset.value,
               showArrow: false,
               persistent: true,
               popperClass: props.popperClass,