mirror of https://github.com/ElemeFE/element
support menu disabled (#9771)
baiyaaaaa
杨奕
parent
1b3832f009
commit
610723ea00
|
|
@ -75,7 +75,8 @@ Top bar NavMenu can be used in a variety of scenarios.
|
|||
<el-menu-item index="2-4-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
<el-menu-item index="3" disabled>Info</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu
|
||||
|
|
@ -99,7 +100,8 @@ Top bar NavMenu can be used in a variety of scenarios.
|
|||
<el-menu-item index="2-4-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
<el-menu-item index="3" disabled>Info</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<script>
|
||||
|
|
@ -155,10 +157,14 @@ Vertical NavMenu with sub-menus.
|
|||
<i class="el-icon-menu"></i>
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>Navigator Four</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
|
@ -192,10 +198,14 @@ Vertical NavMenu with sub-menus.
|
|||
<i class="el-icon-menu"></i>
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>Navigator Four</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -248,10 +258,14 @@ Vertical NavMenu could be collapsed.
|
|||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">Navigator Three</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">Navigator Four</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<style>
|
||||
|
|
@ -320,12 +334,14 @@ Vertical NavMenu could be collapsed.
|
|||
| popper-class | custom class name for the popup menu | string | — | — |
|
||||
| show-timeout | timeout before showing a sub-menu | number | — | 300 |
|
||||
| hide-timeout | timeout before hiding a sub-menu | number | — | 300 |
|
||||
| disabled | whether disabled | boolean | — | false |
|
||||
|
||||
### Menu-Item Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| index | unique identification | string | — | — |
|
||||
| route | Vue Router object | object | — | — |
|
||||
| disabled | whether disabled | boolean | — | false |
|
||||
|
||||
### Menu-Group Attribute
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -76,7 +76,8 @@ Top bar NavMenu puede ser usado en distinto escenarios.
|
|||
<el-menu-item index="2-4-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
<el-menu-item index="3" disabled>Info</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu
|
||||
|
|
@ -100,7 +101,8 @@ Top bar NavMenu puede ser usado en distinto escenarios.
|
|||
<el-menu-item index="2-4-3">item three</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
<el-menu-item index="3" disabled>Info</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Orders</a></el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<script>
|
||||
|
|
@ -157,10 +159,14 @@ NavMenu vertical con sub-menús.
|
|||
<i class="el-icon-menu"></i>
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>Navigator Four</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
|
@ -194,10 +200,14 @@ NavMenu vertical con sub-menús.
|
|||
<i class="el-icon-menu"></i>
|
||||
<span>Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span>Navigator Three</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span>Navigator Four</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -250,10 +260,14 @@ NavMenu vertical puede ser colapsado.
|
|||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">Navigator Two</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">Navigator Three</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">Navigator Four</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<style>
|
||||
|
|
@ -296,6 +310,7 @@ NavMenu vertical puede ser colapsado.
|
|||
| unique-opened | si solo un submenu puede ser activo | boolean | — | false |
|
||||
| menu-trigger | como dispara eventos sub-menus, solo funciona cuando `mode` es 'horizontal' | string | — | hover |
|
||||
| router | si el modo `vue-router` está activado. Si es verdader, índice será usado como 'path' para activar la ruta | boolean | — | false |
|
||||
| disabled | whether disabled | boolean | — | false |
|
||||
|
||||
### Métodos Menu
|
||||
| Nombre de evento | Descripción | Parámetros |
|
||||
|
|
@ -322,12 +337,14 @@ NavMenu vertical puede ser colapsado.
|
|||
| popper-class | custom class name for the popup menu | string | — | — |
|
||||
| show-timeout | tiempo de espera antes de mostrar un submenú | number | — | 300 |
|
||||
| hide-timeout | tiempo de espera antes de ocultar un submenú | number | — | 300 |
|
||||
| disabled | whether disabled | boolean | — | false |
|
||||
|
||||
### Atributos Menu-Item
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| -------- | ------------------- | ------ | ----------------- | ----------- |
|
||||
| index | identificador único | string | — | — |
|
||||
| route | Objeto Vue Router | object | — | — |
|
||||
| disabled | whether disabled | boolean | — | false |
|
||||
|
||||
### Atributos Menu-Group
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
|
|
|
|||
|
|
@ -76,7 +76,8 @@
|
|||
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
<el-menu
|
||||
|
|
@ -100,7 +101,8 @@
|
|||
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<script>
|
||||
|
|
@ -157,10 +159,14 @@
|
|||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航四</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
|
|
@ -195,10 +201,14 @@
|
|||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航四</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -249,10 +259,14 @@
|
|||
<i class="el-icon-menu"></i>
|
||||
<span slot="title">导航二</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-setting"></i>
|
||||
<el-menu-item index="3" disabled>
|
||||
<i class="el-icon-document"></i>
|
||||
<span slot="title">导航三</span>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="4">
|
||||
<i class="el-icon-setting"></i>
|
||||
<span slot="title">导航四</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<style>
|
||||
|
|
@ -316,12 +330,14 @@
|
|||
| popper-class | 弹出菜单的自定义类名 | string | — | — |
|
||||
| show-timeout | 展开 sub-menu 的延时 | number | — | 300 |
|
||||
| hide-timeout | 收起 sub-menu 的延时 | number | — | 300 |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
|
||||
### Menu-Item Attribute
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| index | 唯一标志 | string | — | — |
|
||||
| route | Vue Router 路径对象 | Object | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
|
||||
### Menu-Group Attribute
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<template>
|
||||
<li class="el-menu-item"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
:style="[paddingStyle, itemStyle, { backgroundColor }]"
|
||||
:class="{
|
||||
'is-active': active,
|
||||
'is-disabled': disabled
|
||||
}"
|
||||
@click="handleClick"
|
||||
@mouseenter="onMouseEnter"
|
||||
@focus="onMouseEnter"
|
||||
@blur="onMouseLeave"
|
||||
@mouseleave="onMouseLeave"
|
||||
:class="{
|
||||
'is-active': active,
|
||||
'is-disabled': disabled
|
||||
}"
|
||||
role="menuitem"
|
||||
tabindex="-1"
|
||||
>
|
||||
<el-tooltip
|
||||
v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse"
|
||||
|
|
@ -47,14 +47,8 @@
|
|||
type: String,
|
||||
required: true
|
||||
},
|
||||
route: {
|
||||
type: [String, Object],
|
||||
required: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
}
|
||||
route: [String, Object],
|
||||
disabled: Boolean
|
||||
},
|
||||
computed: {
|
||||
active() {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@
|
|||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
popperClass: String
|
||||
popperClass: String,
|
||||
disabled: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -147,20 +148,22 @@
|
|||
delete this.submenus[item.index];
|
||||
},
|
||||
handleClick() {
|
||||
const {rootMenu} = this;
|
||||
const { rootMenu, disabled } = this;
|
||||
if (
|
||||
(rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') ||
|
||||
(rootMenu.collapse && rootMenu.mode === 'vertical')
|
||||
(rootMenu.collapse && rootMenu.mode === 'vertical') ||
|
||||
disabled
|
||||
) {
|
||||
return;
|
||||
}
|
||||
this.dispatch('ElMenu', 'submenu-click', this);
|
||||
},
|
||||
handleMouseenter() {
|
||||
const {rootMenu} = this;
|
||||
const { rootMenu, disabled } = this;
|
||||
if (
|
||||
(rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
|
||||
(!rootMenu.collapse && rootMenu.mode === 'vertical')
|
||||
(!rootMenu.collapse && rootMenu.mode === 'vertical') ||
|
||||
disabled
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -222,12 +225,13 @@
|
|||
paddingStyle,
|
||||
titleStyle,
|
||||
backgroundColor,
|
||||
$slots,
|
||||
rootMenu,
|
||||
currentPlacement,
|
||||
menuTransitionName,
|
||||
mode,
|
||||
disabled,
|
||||
popperClass,
|
||||
$slots,
|
||||
$parent
|
||||
} = this;
|
||||
|
||||
|
|
@ -272,7 +276,8 @@
|
|||
class={{
|
||||
'el-submenu': true,
|
||||
'is-active': active,
|
||||
'is-opened': opened
|
||||
'is-opened': opened,
|
||||
'is-disabled': disabled
|
||||
}}
|
||||
role="menuitem"
|
||||
aria-haspopup="true"
|
||||
|
|
|
|||
|
|
@ -14,6 +14,26 @@
|
|||
transition: border-color .3s, background-color .3s, color .3s;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
|
||||
* {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color: $--menu-item-hover-fill;
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
opacity: 0.25;
|
||||
cursor: not-allowed;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(menu) {
|
||||
|
|
@ -41,7 +61,8 @@
|
|||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover, &:focus{
|
||||
&:not(.is-disabled):hover,
|
||||
&:not(.is-disabled):focus{
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -95,8 +116,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
& .el-menu-item:hover,
|
||||
& .el-menu-item:focus {
|
||||
& .el-menu-item:not(.is-disabled):hover,
|
||||
& .el-menu-item:not(.is-disabled):focus {
|
||||
outline: none;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
|
|
@ -182,22 +203,6 @@
|
|||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
& * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
background-color: $--menu-item-hover-fill;
|
||||
}
|
||||
i {
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
@include when(active) {
|
||||
color: $--color-primary;
|
||||
i {
|
||||
|
|
@ -212,17 +217,8 @@
|
|||
padding-left: 0;
|
||||
|
||||
@include e(title) {
|
||||
position: relative;
|
||||
@include menu-item;
|
||||
|
||||
& * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $--color-text-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $--menu-item-hover-fill;
|
||||
}
|
||||
|
|
@ -254,6 +250,14 @@
|
|||
transform: rotateZ(180deg);
|
||||
}
|
||||
}
|
||||
@include when(disabled) {
|
||||
.el-submenu__title,
|
||||
.el-menu-item {
|
||||
opacity: 0.25;
|
||||
cursor: not-allowed;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
[class^="el-icon-"] {
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,22 @@ describe('Menu', () => {
|
|||
}, 20);
|
||||
|
||||
});
|
||||
it('menu-item disabled', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-menu default-active="2">
|
||||
<el-menu-item index="1" ref="item1" disabled>处理中心</el-menu-item>
|
||||
<el-menu-item index="2" ref="item2">订单管理</el-menu-item>
|
||||
</el-menu>
|
||||
`
|
||||
}, true);
|
||||
expect(vm.$refs.item2.$el.classList.contains('is-active')).to.be.true;
|
||||
vm.$refs.item1.$el.click();
|
||||
setTimeout(_ => {
|
||||
expect(vm.$refs.item1.$el.classList.contains('is-active')).to.be.false;
|
||||
done();
|
||||
}, 20);
|
||||
});
|
||||
describe('default active', () => {
|
||||
it('normal active', done => {
|
||||
vm = createVue({
|
||||
|
|
@ -216,6 +232,28 @@ describe('Menu', () => {
|
|||
done();
|
||||
}, 20);
|
||||
});
|
||||
it('disabled', done => {
|
||||
vm = createVue({
|
||||
template: `
|
||||
<el-menu>
|
||||
<el-menu-item index="1" ref="item1">处理中心</el-menu-item>
|
||||
<el-submenu index="2" ref="submenu" disabled>
|
||||
<template slot="title">我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2" ref="submenuItem2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3">订单管理</el-menu-item>
|
||||
</el-menu>
|
||||
`
|
||||
}, true);
|
||||
var submenu = vm.$refs.submenu;
|
||||
submenu.$el.querySelector('.el-submenu__title').click();
|
||||
setTimeout(_ => {
|
||||
expect(submenu.$el.classList.contains('is-opened')).to.be.false;
|
||||
done();
|
||||
}, 20);
|
||||
});
|
||||
});
|
||||
it('unique-opened', done => {
|
||||
vm = createVue({
|
||||
|
|
|
|||
Loading…
Reference in New Issue