mirror of https://github.com/ElemeFE/element
support menu disabled (#9771)
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-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 |
|
||||||
|
|
|
@ -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 |
|
||||||
|
|
|
@ -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
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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({
|
||||||
|
|
Loading…
Reference in New Issue