mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-03 11:47:48 +08:00
* 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>
This commit is contained in:
知晓同丶
GitHub
parent
0482d11337
commit
750088624e
@ -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` | — | — |
|
||||
|
||||
39
docs/examples/menu/popper-offset.vue
Normal file
39
docs/examples/menu/popper-offset.vue
Normal file
@ -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>
|
||||
@ -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,
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user