mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 12:17:37 +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
|
## Menu Attributes
|
||||||
|
|
||||||
| Name | Description | Type | Accepted Values | Default |
|
| Name | Description | Type | Accepted Values | Default |
|
||||||
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- | -------- |
|
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------------- | -------- |
|
||||||
| mode | menu display mode | string | horizontal / vertical | vertical |
|
| mode | menu display mode | string | horizontal / vertical | vertical |
|
||||||
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
|
| 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 | 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 |
|
| ellipsis-icon^(2.5.0) | custom ellipsis icon (available only in horizontal mode and ellipsis is true) | `string \| Component` | — | — |
|
||||||
| text-color | text color of Menu (hex format) (deprecated, use `--text-color` instead) | string | — | #303133 |
|
| popper-offset^(2.5.0) | offset of the popper (effective for all submenus) | number | — | 6 |
|
||||||
| active-text-color | text color of currently active menu item (hex format) (deprecated, use `--active-color` instead) | string | — | #409EFF |
|
| background-color | background color of Menu (hex format) (deprecated, use `--bg-color` instead) | string | — | #ffffff |
|
||||||
| default-active | index of active menu on page load | string | — | — |
|
| text-color | text color of Menu (hex format) (deprecated, use `--text-color` instead) | string | — | #303133 |
|
||||||
| default-openeds | array that contains indexes of currently active sub-menus | Array | — | — |
|
| active-text-color | text color of currently active menu item (hex format) (deprecated, use `--active-color` instead) | string | — | #409EFF |
|
||||||
| unique-opened | whether only one sub-menu can be active | boolean | — | false |
|
| default-active | index of active menu on page load | string | — | — |
|
||||||
| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | hover / click | hover |
|
| default-openeds | array that contains indexes of currently active sub-menus | Array | — | — |
|
||||||
| 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 |
|
| unique-opened | whether only one sub-menu can be active | boolean | — | false |
|
||||||
| collapse-transition | whether to enable the collapse transition | boolean | — | true |
|
| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | hover / click | hover |
|
||||||
| popper-effect ^(2.2.26) | Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed | string | dark / light | dark |
|
| 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
|
## Menu Methods
|
||||||
|
|
||||||
@ -101,7 +113,7 @@ menu/collapse
|
|||||||
| disabled | whether the sub-menu is disabled | boolean | — | false |
|
| 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 |
|
| 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 |
|
| 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-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` | — | — |
|
| 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` | — | — |
|
| 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,
|
buildProps,
|
||||||
definePropType,
|
definePropType,
|
||||||
flattedChildren,
|
flattedChildren,
|
||||||
|
iconPropType,
|
||||||
isObject,
|
isObject,
|
||||||
isString,
|
isString,
|
||||||
mutable,
|
mutable,
|
||||||
@ -31,7 +32,12 @@ import { useMenuCssVar } from './use-menu-css-var'
|
|||||||
|
|
||||||
import type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'
|
import type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'
|
||||||
import type { NavigationFailure, Router } from 'vue-router'
|
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'
|
import type { UseResizeObserverReturn } from '@vueuse/core'
|
||||||
|
|
||||||
export const menuProps = buildProps({
|
export const menuProps = buildProps({
|
||||||
@ -67,6 +73,14 @@ export const menuProps = buildProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
popperOffset: {
|
||||||
|
type: Number,
|
||||||
|
default: 6,
|
||||||
|
},
|
||||||
|
ellipsisIcon: {
|
||||||
|
type: iconPropType,
|
||||||
|
default: () => More,
|
||||||
|
},
|
||||||
popperEffect: {
|
popperEffect: {
|
||||||
type: String,
|
type: String,
|
||||||
values: ['dark', 'light'],
|
values: ['dark', 'light'],
|
||||||
@ -393,6 +407,7 @@ export default defineComponent({
|
|||||||
{
|
{
|
||||||
index: 'sub-menu-more',
|
index: 'sub-menu-more',
|
||||||
class: nsSubMenu.e('hide-arrow'),
|
class: nsSubMenu.e('hide-arrow'),
|
||||||
|
popperOffset: props.popperOffset,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: () =>
|
title: () =>
|
||||||
@ -401,7 +416,9 @@ export default defineComponent({
|
|||||||
{
|
{
|
||||||
class: nsSubMenu.e('icon-more'),
|
class: nsSubMenu.e('icon-more'),
|
||||||
},
|
},
|
||||||
{ default: () => h(More) }
|
{
|
||||||
|
default: () => h(props.ellipsisIcon as Component),
|
||||||
|
}
|
||||||
),
|
),
|
||||||
default: () => slotMore,
|
default: () => slotMore,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -58,7 +58,7 @@ export const subMenuProps = buildProps({
|
|||||||
},
|
},
|
||||||
popperOffset: {
|
popperOffset: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 6,
|
default: undefined,
|
||||||
},
|
},
|
||||||
expandCloseIcon: {
|
expandCloseIcon: {
|
||||||
type: iconPropType,
|
type: iconPropType,
|
||||||
@ -196,6 +196,10 @@ export default defineComponent({
|
|||||||
|
|
||||||
const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1)
|
const ulStyle = useMenuCssVar(rootMenu.props, subMenu.level + 1)
|
||||||
|
|
||||||
|
const subMenuPopperOffset = computed(() => {
|
||||||
|
return props.popperOffset ?? rootMenu.props.popperOffset
|
||||||
|
})
|
||||||
|
|
||||||
// methods
|
// methods
|
||||||
const doDestroy = () =>
|
const doDestroy = () =>
|
||||||
vPopper.value?.popperRef?.popperInstanceRef?.destroy()
|
vPopper.value?.popperRef?.popperInstanceRef?.destroy()
|
||||||
@ -349,7 +353,7 @@ export default defineComponent({
|
|||||||
visible: opened.value,
|
visible: opened.value,
|
||||||
effect: 'light',
|
effect: 'light',
|
||||||
pure: true,
|
pure: true,
|
||||||
offset: props.popperOffset,
|
offset: subMenuPopperOffset.value,
|
||||||
showArrow: false,
|
showArrow: false,
|
||||||
persistent: true,
|
persistent: true,
|
||||||
popperClass: props.popperClass,
|
popperClass: props.popperClass,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user