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); }); });