Merge pull request #819 from baiyaaaaa/feat-dropdown

dropdown-item add disabled && divided

examples/docs/zh-cn/dropdown.md

@@ -66,8 +66,8 @@
     <el-dropdown-item>黄金糕</el-dropdown-item>
     <el-dropdown-item>狮子头</el-dropdown-item>
     <el-dropdown-item>螺蛳粉</el-dropdown-item>
-    <el-dropdown-item>双皮奶</el-dropdown-item>
+    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
-    <el-dropdown-item>蚵仔煎</el-dropdown-item>
+    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
 ```
@@ -163,7 +163,9 @@
 | click  | `split-button` 为 true 时，点击左侧按钮的回调 | — |
 | command  | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
 
-### Dropdown Attributes
+### Dropdown Menu Item Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | command       | 指令     | string          | — | — |
+| disabled      | 禁用     | boolean          | — | false |
+| divided       | 显示分割线     | boolean          | — | false |

packages/dropdown/src/dropdown-item.vue

@@ -1,5 +1,14 @@
 <template>
-  <li class="el-dropdown-item" @click="handleClick"><slot></slot></li>
+  <li
+    class="el-dropdown-menu__item"
+    :class="{
+      'is-disabled': disabled,
+      'el-dropdown-menu__item--divided': divided
+    }"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </li>
 </template>
 <script>
   import Emitter from 'element-ui/src/mixins/emitter';
@@ -10,7 +19,9 @@
     mixins: [Emitter],
 
     props: {
-      command: String
+      command: String,
+      disabled: Boolean,
+      divided: Boolean
     },
 
     methods: {

packages/dropdown/src/dropdown-menu.vue

@@ -1,6 +1,6 @@
 <template>
   <transition name="md-fade-bottom" @after-leave="doDestroy">
-    <ul class="el-dropdown__menu" v-show="showPopper">
+    <ul class="el-dropdown-menu" v-show="showPopper">
       <slot></slot>
     </ul>
   </transition>

packages/theme-default/src/dropdown.css

@@ -13,38 +13,6 @@
       display: block;
     }
 
-    @e menu{
-      margin: 5px 0;
-      background-color: #fff;
-      border: 1px solid #D3DCE6;
-      box-shadow: var(--dropdown-menu-box-shadow);
-      padding: 6px 0;
-      z-index: 10;
-      position: absolute;
-      top: 0;
-      left: 0;
-      min-width: 100px;
-
-      & li {
-        list-style: none;
-        line-height: 36px;
-        padding: 0 10px;
-        margin: 0;
-        cursor: pointer;
-
-        &:hover {
-          background-color: var(--dropdown-menuItem-hover-fill);
-          color: var(--dropdown-menuItem-hover-color);
-        }
-        &.divider {
-          margin-top: 6px;
-          border-top: 1px solid #D3DCE6;
-        }
-        &.divider:last-child {
-          margin-bottom: -6px;
-        }
-      }
-    }
     & .el-dropdown__caret-button {
       padding: * 5px;
 
@@ -56,9 +24,47 @@
       font-size: 12px;
       margin: 0 3px;
     }
-    @m text {
+  }
-      .el-button--text {
+  @b dropdown-menu {
-        padding: 0;
+    margin: 5px 0;
+    background-color: #fff;
+    border: 1px solid #D3DCE6;
+    box-shadow: var(--dropdown-menu-box-shadow);
+    padding: 6px 0;
+    z-index: 10;
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 100px;
+
+    @e item {
+      list-style: none;
+      line-height: 36px;
+      padding: 0 10px;
+      margin: 0;
+      cursor: pointer;
+
+      &:not(.is-disabled):hover {
+        background-color: var(--dropdown-menuItem-hover-fill);
+        color: var(--dropdown-menuItem-hover-color);
+      }
+      @m divided {
+        position: relative;
+        margin-top: 6px;
+        border-top: 1px solid #D3DCE6;
+
+        &:before {
+          content: '';
+          height: 6px;
+          display: block;
+          margin: 0 -10px;
+          background-color: #fff;
+        }
+      }
+      @when disabled {
+        cursor: default;
+        color: #c0ccda;
+        pointer-events: none;
       }
     }
   }