support menu disabled (#9771)

pull/9777/head
baiyaaaaa 2018-02-11 14:59:46 +08:00 committed by 杨奕
parent 1b3832f009
commit 610723ea00
7 changed files with 163 additions and 73 deletions

View File

@ -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-menu-item index="2-4-3">item three</el-menu-item>
</el-submenu> </el-submenu>
</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> </el-menu>
<div class="line"></div> <div class="line"></div>
<el-menu <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-menu-item index="2-4-3">item three</el-menu-item>
</el-submenu> </el-submenu>
</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> </el-menu>
<script> <script>
@ -155,10 +157,14 @@ Vertical NavMenu with sub-menus.
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span>Navigator Two</span> <span>Navigator Two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span>Navigator Three</span> <span>Navigator Three</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span>Navigator Four</span>
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -192,10 +198,14 @@ Vertical NavMenu with sub-menus.
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span>Navigator Two</span> <span>Navigator Two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span>Navigator Three</span> <span>Navigator Three</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span>Navigator Four</span>
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
</el-row> </el-row>
@ -248,10 +258,14 @@ Vertical NavMenu could be collapsed.
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span slot="title">Navigator Two</span> <span slot="title">Navigator Two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span slot="title">Navigator Three</span> <span slot="title">Navigator Three</span>
</el-menu-item> </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> </el-menu>
<style> <style>
@ -320,12 +334,14 @@ Vertical NavMenu could be collapsed.
| popper-class | custom class name for the popup menu | string | — | — | | popper-class | custom class name for the popup menu | string | — | — |
| show-timeout | timeout before showing a sub-menu | number | — | 300 | | show-timeout | timeout before showing a sub-menu | number | — | 300 |
| hide-timeout | timeout before hiding a sub-menu | number | — | 300 | | hide-timeout | timeout before hiding a sub-menu | number | — | 300 |
| disabled | whether disabled | boolean | — | false |
### Menu-Item Attribute ### Menu-Item Attribute
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| index | unique identification | string | — | — | | index | unique identification | string | — | — |
| route | Vue Router object | object | — | — | | route | Vue Router object | object | — | — |
| disabled | whether disabled | boolean | — | false |
### Menu-Group Attribute ### Menu-Group Attribute
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |

View File

@ -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-menu-item index="2-4-3">item three</el-menu-item>
</el-submenu> </el-submenu>
</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> </el-menu>
<div class="line"></div> <div class="line"></div>
<el-menu <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-menu-item index="2-4-3">item three</el-menu-item>
</el-submenu> </el-submenu>
</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> </el-menu>
<script> <script>
@ -157,10 +159,14 @@ NavMenu vertical con sub-menús.
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span>Navigator Two</span> <span>Navigator Two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span>Navigator Three</span> <span>Navigator Three</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span>Navigator Four</span>
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -194,10 +200,14 @@ NavMenu vertical con sub-menús.
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span>Navigator Two</span> <span>Navigator Two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span>Navigator Three</span> <span>Navigator Three</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span>Navigator Four</span>
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
</el-row> </el-row>
@ -250,10 +260,14 @@ NavMenu vertical puede ser colapsado.
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span slot="title">Navigator Two</span> <span slot="title">Navigator Two</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span slot="title">Navigator Three</span> <span slot="title">Navigator Three</span>
</el-menu-item> </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> </el-menu>
<style> <style>
@ -296,6 +310,7 @@ NavMenu vertical puede ser colapsado.
| unique-opened | si solo un submenu puede ser activo | boolean | — | false | | 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 | | 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 | | 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 ### Métodos Menu
| Nombre de evento | Descripción | Parámetros | | 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 | — | — | | popper-class | custom class name for the popup menu | string | — | — |
| show-timeout | tiempo de espera antes de mostrar un submenú | number | — | 300 | | show-timeout | tiempo de espera antes de mostrar un submenú | number | — | 300 |
| hide-timeout | tiempo de espera antes de ocultar un submenú | number | — | 300 | | hide-timeout | tiempo de espera antes de ocultar un submenú | number | — | 300 |
| disabled | whether disabled | boolean | — | false |
### Atributos Menu-Item ### Atributos Menu-Item
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ------------------- | ------ | ----------------- | ----------- | | -------- | ------------------- | ------ | ----------------- | ----------- |
| index | identificador único | string | — | — | | index | identificador único | string | — | — |
| route | Objeto Vue Router | object | — | — | | route | Objeto Vue Router | object | — | — |
| disabled | whether disabled | boolean | — | false |
### Atributos Menu-Group ### Atributos Menu-Group
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |

View File

@ -76,7 +76,8 @@
<el-menu-item index="2-4-3">选项3</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
</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> </el-menu>
<div class="line"></div> <div class="line"></div>
<el-menu <el-menu
@ -100,7 +101,8 @@
<el-menu-item index="2-4-3">选项3</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu> </el-submenu>
</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> </el-menu>
<script> <script>
@ -157,10 +159,14 @@
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span slot="title">导航二</span> <span slot="title">导航二</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span slot="title">导航三</span> <span slot="title">导航三</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -195,10 +201,14 @@
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span slot="title">导航二</span> <span slot="title">导航二</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span slot="title">导航三</span> <span slot="title">导航三</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
</el-row> </el-row>
@ -249,10 +259,14 @@
<i class="el-icon-menu"></i> <i class="el-icon-menu"></i>
<span slot="title">导航二</span> <span slot="title">导航二</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="3"> <el-menu-item index="3" disabled>
<i class="el-icon-setting"></i> <i class="el-icon-document"></i>
<span slot="title">导航三</span> <span slot="title">导航三</span>
</el-menu-item> </el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu> </el-menu>
<style> <style>
@ -316,12 +330,14 @@
| popper-class | 弹出菜单的自定义类名 | string | — | — | | popper-class | 弹出菜单的自定义类名 | string | — | — |
| show-timeout | 展开 sub-menu 的延时 | number | — | 300 | | show-timeout | 展开 sub-menu 的延时 | number | — | 300 |
| hide-timeout | 收起 sub-menu 的延时 | number | — | 300 | | hide-timeout | 收起 sub-menu 的延时 | number | — | 300 |
| disabled | 是否禁用 | boolean | — | false |
### Menu-Item Attribute ### Menu-Item Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| index | 唯一标志 | string | — | — | | index | 唯一标志 | string | — | — |
| route | Vue Router 路径对象 | Object | — | — | | route | Vue Router 路径对象 | Object | — | — |
| disabled | 是否禁用 | boolean | — | false |
### Menu-Group Attribute ### Menu-Group Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -1,17 +1,17 @@
<template> <template>
<li class="el-menu-item" <li class="el-menu-item"
role="menuitem"
tabindex="-1"
:style="[paddingStyle, itemStyle, { backgroundColor }]" :style="[paddingStyle, itemStyle, { backgroundColor }]"
:class="{
'is-active': active,
'is-disabled': disabled
}"
@click="handleClick" @click="handleClick"
@mouseenter="onMouseEnter" @mouseenter="onMouseEnter"
@focus="onMouseEnter" @focus="onMouseEnter"
@blur="onMouseLeave" @blur="onMouseLeave"
@mouseleave="onMouseLeave" @mouseleave="onMouseLeave"
:class="{
'is-active': active,
'is-disabled': disabled
}"
role="menuitem"
tabindex="-1"
> >
<el-tooltip <el-tooltip
v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse" v-if="parentMenu.$options.componentName === 'ElMenu' && rootMenu.collapse"
@ -47,14 +47,8 @@
type: String, type: String,
required: true required: true
}, },
route: { route: [String, Object],
type: [String, Object], disabled: Boolean
required: false
},
disabled: {
type: Boolean,
required: false
}
}, },
computed: { computed: {
active() { active() {

View File

@ -42,7 +42,8 @@
type: Number, type: Number,
default: 300 default: 300
}, },
popperClass: String popperClass: String,
disabled: Boolean
}, },
data() { data() {
@ -147,20 +148,22 @@
delete this.submenus[item.index]; delete this.submenus[item.index];
}, },
handleClick() { handleClick() {
const {rootMenu} = this; const { rootMenu, disabled } = this;
if ( if (
(rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') || (rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') ||
(rootMenu.collapse && rootMenu.mode === 'vertical') (rootMenu.collapse && rootMenu.mode === 'vertical') ||
disabled
) { ) {
return; return;
} }
this.dispatch('ElMenu', 'submenu-click', this); this.dispatch('ElMenu', 'submenu-click', this);
}, },
handleMouseenter() { handleMouseenter() {
const {rootMenu} = this; const { rootMenu, disabled } = this;
if ( if (
(rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') || (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
(!rootMenu.collapse && rootMenu.mode === 'vertical') (!rootMenu.collapse && rootMenu.mode === 'vertical') ||
disabled
) { ) {
return; return;
} }
@ -222,12 +225,13 @@
paddingStyle, paddingStyle,
titleStyle, titleStyle,
backgroundColor, backgroundColor,
$slots,
rootMenu, rootMenu,
currentPlacement, currentPlacement,
menuTransitionName, menuTransitionName,
mode, mode,
disabled,
popperClass, popperClass,
$slots,
$parent $parent
} = this; } = this;
@ -272,7 +276,8 @@
class={{ class={{
'el-submenu': true, 'el-submenu': true,
'is-active': active, 'is-active': active,
'is-opened': opened 'is-opened': opened,
'is-disabled': disabled
}} }}
role="menuitem" role="menuitem"
aria-haspopup="true" aria-haspopup="true"

View File

@ -14,6 +14,26 @@
transition: border-color .3s, background-color .3s, color .3s; transition: border-color .3s, background-color .3s, color .3s;
box-sizing: border-box; box-sizing: border-box;
white-space: nowrap; 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) { @include b(menu) {
@ -41,7 +61,8 @@
color: inherit; color: inherit;
} }
&:hover, &:focus{ &:not(.is-disabled):hover,
&:not(.is-disabled):focus{
background-color: #fff; background-color: #fff;
} }
} }
@ -95,8 +116,8 @@
} }
} }
} }
& .el-menu-item:hover, & .el-menu-item:not(.is-disabled):hover,
& .el-menu-item:focus { & .el-menu-item:not(.is-disabled):focus {
outline: none; outline: none;
color: $--color-text-primary; color: $--color-text-primary;
} }
@ -182,22 +203,6 @@
font-size: 18px; font-size: 18px;
vertical-align: middle; 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) { @include when(active) {
color: $--color-primary; color: $--color-primary;
i { i {
@ -212,17 +217,8 @@
padding-left: 0; padding-left: 0;
@include e(title) { @include e(title) {
position: relative;
@include menu-item; @include menu-item;
& * {
vertical-align: middle;
}
i {
color: $--color-text-secondary;
}
&:hover { &:hover {
background-color: $--menu-item-hover-fill; background-color: $--menu-item-hover-fill;
} }
@ -254,6 +250,14 @@
transform: rotateZ(180deg); transform: rotateZ(180deg);
} }
} }
@include when(disabled) {
.el-submenu__title,
.el-menu-item {
opacity: 0.25;
cursor: not-allowed;
background: none !important;
}
}
[class^="el-icon-"] { [class^="el-icon-"] {
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;

View File

@ -56,6 +56,22 @@ describe('Menu', () => {
}, 20); }, 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', () => { describe('default active', () => {
it('normal active', done => { it('normal active', done => {
vm = createVue({ vm = createVue({
@ -216,6 +232,28 @@ describe('Menu', () => {
done(); done();
}, 20); }, 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 => { it('unique-opened', done => {
vm = createVue({ vm = createVue({