Merge pull request #741 from baiyaaaaa/feat-dropdown

dropdown: add command api

CHANGELOG.md

 ## 更新日志
 
 ### 1.0.0-rc.9
-*2016-11-xx*
+
+*2016-11-XX*
+
 - 新增 MessageBox 确定按钮自动获取焦点, #721
 - 修复 Popover focus 失效, #734
 - 修复 Clickoutside 报错, #729
+- 新增 Dropdown 新增 command api #432
 
 ### 1.0.0-rc.8
 

examples/docs/zh-cn/dropdown.md

@@ -148,7 +148,7 @@
 :::
 
 
-### Attributes
+### Dropdown Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
 | type          | 菜单按钮类型，同 Button 组件(只在`split-button`为 true 的情况下有效)   | string  |          —             |    —     |
@@ -157,7 +157,13 @@
 | menu-align    | 菜单水平对齐方向     | string          | start, end  | end |
 | trigger       | 触发下拉的行为     | string          | hover, click  | hover |
 
-### Events
+### Dropdown Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
 | click  | `split-button` 为 true 时，点击左侧按钮的回调 | — |
+| command  | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
+
+### Dropdown Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| command       | 指令     | string          | — | — |

packages/dropdown/src/dropdown-item.vue

@@ -9,9 +9,13 @@
 
     mixins: [Emitter],
 
+    props: {
+      command: String
+    },
+
     methods: {
       handleClick(e) {
-        this.dispatch('ElDropdown', 'visible', [false]);
+        this.dispatch('ElDropdown', 'menu-item-click', [this.command, this]);
       }
     }
   };

packages/dropdown/src/dropdown.vue

@@ -33,7 +33,7 @@
     },
 
     mounted() {
-      this.$on('visible', value => { this.visible = value; });
+      this.$on('menu-item-click', this.handleMenuItemClick);
       this.initEvent();
     },
 
@@ -76,6 +76,10 @@
         } else if (trigger === 'click') {
           triggerElm.addEventListener('click', handleClick);
         }
+      },
+      handleMenuItemClick(command, instance) {
+        this.visible = false;
+        this.$emit('command', command, instance);
       }
     },
 

test/unit/specs/dropdown.spec.js

-import { createVue, triggerEvent } from '../util';
+import { createVue, triggerEvent, destroyVM } from '../util';
 
 describe('Dropdown', () => {
   it('create', done => {
@@ -29,6 +29,7 @@ describe('Dropdown', () => {
       triggerEvent(triggerElm, 'mouseleave');
       setTimeout(_ => {
         expect(dropdown.visible).to.not.true;
+        destroyVM(vm);
         done();
       }, 300);
     }, 400);
@@ -36,43 +37,37 @@ describe('Dropdown', () => {
   it('menu click', done => {
     const vm = createVue({
       template: `
-        <el-dropdown>
+        <el-dropdown ref="dropdown">
           <span class="el-dropdown-link">
             下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
           </span>
           <el-dropdown-menu slot="dropdown" class="dropdown-test-menu-click">
-            <el-dropdown-item>黄金糕</el-dropdown-item>
-            <el-dropdown-item @click.native="handleClick">狮子头</el-dropdown-item>
-            <el-dropdown-item>螺蛳粉</el-dropdown-item>
-            <el-dropdown-item>双皮奶</el-dropdown-item>
-            <el-dropdown-item>蚵仔煎</el-dropdown-item>
+            <el-dropdown-item command="a">黄金糕</el-dropdown-item>
+            <el-dropdown-item command="b">狮子头</el-dropdown-item>
+            <el-dropdown-item ref="commandC" command="c">螺蛳粉</el-dropdown-item>
+            <el-dropdown-item command="d">双皮奶</el-dropdown-item>
+            <el-dropdown-item command="e">蚵仔煎</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-      `,
-      data() {
-        return {
-          clickedItem: ''
-        };
-      },
-      methods: {
-        handleClick(ev) {
-          this.clickedItem = ev.target.innerText;
-        }
-      }
+      `
     }, true);
-    let dropdownElm = vm.$el;
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
     let triggerElm = dropdownElm.children[0];
+    let callback = sinon.spy();
+
+    dropdown.$on('command', callback);
 
     triggerEvent(triggerElm, 'mouseenter');
     setTimeout(_ => {
-      let dropdownMenu = document.querySelector('.dropdown-test-menu-click');
-      dropdownMenu.children[1].click();
+      vm.$refs.commandC.$el.click();
       setTimeout(_ => {
-        expect(dropdownMenu.style.display).to.be.equal('none');
-        expect(vm.clickedItem).to.be.equal('狮子头');
+        expect(dropdown.visible).to.not.true;
+        expect(callback.calledWith('c')).to.be.true;
+        destroyVM(vm);
         done();
-      }, 600);
-    }, 400);
+      }, 300);
+    }, 300);
   });
   it('trigger', done => {
     const vm = createVue({
@@ -89,17 +84,7 @@ describe('Dropdown', () => {
             <el-dropdown-item>蚵仔煎</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-      `,
-      data() {
-        return {
-          clickedItem: ''
-        };
-      },
-      methods: {
-        handleClick(ev) {
-          this.clickedItem = ev.target.innerText;
-        }
-      }
+      `
     }, true);
     let dropdownElm = vm.$el;
     let dropdown = vm.$refs.dropdown;
@@ -109,9 +94,10 @@ describe('Dropdown', () => {
     dropdown.$nextTick(_ => {
       expect(dropdown.visible).to.not.true;
 
-      dropdownElm.children[0].click();
+      triggerElm.click();
       dropdown.$nextTick(_ => {
         expect(dropdown.visible).to.be.true;
+        destroyVM(vm);
         done();
       });
     });
@@ -119,7 +105,7 @@ describe('Dropdown', () => {
   it('split button', done => {
     const vm = createVue({
       template: `
-        <el-dropdown split-button type="primary" @click="handleClick" ref="dropdown">
+        <el-dropdown split-button type="primary" ref="dropdown">
           更多菜单
           <el-dropdown-menu slot="dropdown" class="dropdown-test-split-button">
             <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -129,22 +115,20 @@ describe('Dropdown', () => {
             <el-dropdown-item>蚵仔煎</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-      `,
-      data() {
-        return {
-          btnClicked: false
-        };
-      },
-      methods: {
-        handleClick(ev) {
-          this.btnClicked = true;
-        }
-      }
+      `
     }, true);
 
     let dropdown = vm.$refs.dropdown;
     let dropdownElm = dropdown.$el;
     let triggerElm = dropdownElm.querySelector('.el-dropdown__caret-button');
+    var callback = sinon.spy();
+
+    dropdown.$on('click', callback);
+    dropdownElm.querySelector('.el-button').click();
+
+    setTimeout(_ => {
+      expect(callback.called).to.be.true;
+    }, 300);
 
     triggerEvent(triggerElm, 'mouseenter');
     setTimeout(_ => {
@@ -153,8 +137,9 @@ describe('Dropdown', () => {
       triggerEvent(triggerElm, 'mouseleave');
       setTimeout(_ => {
         expect(dropdown.visible).to.not.true;
+        destroyVM(vm);
         done();
-      }, 400);
-    }, 400);
+      }, 300);
+    }, 300);
   });
 });