support menu disabled (#9771)

examples/docs/en-US/menu.md

@@ -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  |

examples/docs/es/menu.md

@@ -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 |

examples/docs/zh-CN/menu.md

@@ -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
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

packages/menu/src/menu-item.vue

@@ -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() {

packages/menu/src/submenu.vue

@@ -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"

packages/theme-chalk/src/menu.scss

@@ -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;

test/unit/specs/menu.spec.js

@@ -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({