diff --git a/docs/en-US/component/menu.md b/docs/en-US/component/menu.md
index c2a87f2904..428d7aadb5 100644
--- a/docs/en-US/component/menu.md
+++ b/docs/en-US/component/menu.md
@@ -51,23 +51,35 @@ 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 |
-| 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 |
-| default-active | index of active menu on page load | string | — | — |
-| default-openeds | array that contains indexes of currently active sub-menus | Array | — | — |
-| unique-opened | whether only one sub-menu can be active | boolean | — | false |
-| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | hover / click | hover |
-| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action. Use with `default-active` to set the active item on load. | boolean | — | false |
-| collapse-transition | whether to enable the collapse transition | boolean | — | true |
-| popper-effect ^(2.2.26) | Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed | string | dark / light | dark |
+| 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 |
+| default-active | index of active menu on page load | string | — | — |
+| default-openeds | array that contains indexes of currently active sub-menus | Array | — | — |
+| unique-opened | whether only one sub-menu can be active | boolean | — | false |
+| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | hover / click | hover |
+| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action. Use with `default-active` to set the active item on load. | boolean | — | false |
+| collapse-transition | whether to enable the collapse transition | boolean | — | true |
+| popper-effect ^(2.2.26) | Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed | string | dark / light | dark |
## Menu Methods
@@ -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` | — | — |
diff --git a/docs/examples/menu/popper-offset.vue b/docs/examples/menu/popper-offset.vue
new file mode 100644
index 0000000000..b58ef90744
--- /dev/null
+++ b/docs/examples/menu/popper-offset.vue
@@ -0,0 +1,39 @@
+
+
+
+
+
diff --git a/packages/components/menu/src/menu.ts b/packages/components/menu/src/menu.ts
index 173e2ffbd3..5f2829d762 100644
--- a/packages/components/menu/src/menu.ts
+++ b/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,
}
diff --git a/packages/components/menu/src/sub-menu.ts b/packages/components/menu/src/sub-menu.ts
index dd9ca55eae..457eb5e3c4 100644
--- a/packages/components/menu/src/sub-menu.ts
+++ b/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,