diff --git a/CHANGELOG.md b/CHANGELOG.md
index f61a44692..6b8fb3694 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,13 @@
## 更新日志
### 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
diff --git a/examples/docs/zh-cn/dropdown.md b/examples/docs/zh-cn/dropdown.md
index 55d77db2f..1121fdd1a 100644
--- a/examples/docs/zh-cn/dropdown.md
+++ b/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 | — | — |
diff --git a/packages/dropdown/src/dropdown-item.vue b/packages/dropdown/src/dropdown-item.vue
index 65e064bed..dc4e30e09 100644
--- a/packages/dropdown/src/dropdown-item.vue
+++ b/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]);
}
}
};
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index d1bbe88ec..71f21f2d8 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/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);
}
},
diff --git a/test/unit/specs/dropdown.spec.js b/test/unit/specs/dropdown.spec.js
index 1aedc8fea..89e09605b 100644
--- a/test/unit/specs/dropdown.spec.js
+++ b/test/unit/specs/dropdown.spec.js
@@ -1,4 +1,4 @@
-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: `
-
+
下拉菜单
- `,
- 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', () => {
蚵仔煎
- `,
- 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: `
-
+
更多菜单
黄金糕
@@ -129,22 +115,20 @@ describe('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);
});
});