From 750088624e8207cef53396e50164cc416fe0191e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=9F=A5=E6=99=93=E5=90=8C=E4=B8=B6?= <947803089@qq.com> Date: Wed, 6 Dec 2023 10:34:47 +0800 Subject: [PATCH] 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 Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> --- docs/en-US/component/menu.md | 44 +++++++++++++++--------- docs/examples/menu/popper-offset.vue | 39 +++++++++++++++++++++ packages/components/menu/src/menu.ts | 21 +++++++++-- packages/components/menu/src/sub-menu.ts | 8 +++-- 4 files changed, 92 insertions(+), 20 deletions(-) create mode 100644 docs/examples/menu/popper-offset.vue 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,