github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

add dropdown hide-on-click prop

pull/1881/head
baiyaaaaa 2016-12-20 18:42:44 +08:00 committed by cinwell.li
parent 98d3905ce9
commit d2f852a320
4 changed files with 46 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/docs/en-US/dropdown.md
View File

@ -113,6 +113,7 @@ Click the triggering element or hover on it.
| size | component size, refer to `Button` component | string | large, small, mini | — |
| menu-align | horizontal alignment | string | start/end | end |
| trigger | how to trigger | string | hover/click | hover |
| hide-on-click | whether to hide menu after clicking menu-item | boolean | - | true |
### Dropdown Events
| Event Name | Description | Parameters |

1
examples/docs/zh-CN/dropdown.md
View File

@ -156,6 +156,7 @@
| split-button | 下拉触发元素呈现为按钮组 | boolean | — | false |
| menu-align | 菜单水平对齐方向 | string | start, end | end |
| trigger | 触发下拉的行为 | string | hover, click | hover |
| hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | - | true |
### Dropdown Events
| 事件名称 | 说明 | 回调参数 |

10
packages/dropdown/src/dropdown.vue
View File

@ -22,7 +22,11 @@
},
type: String,
size: String,
splitButton: Boolean
splitButton: Boolean,
hideOnClick: {
type: Boolean,
default: true
}
},
data() {
@ -78,7 +82,9 @@
}
},
handleMenuItemClick(command, instance) {
this.visible = false;
if (this.hideOnClick) {
this.visible = false;
}
this.$emit('command', command, instance);
}
},

38
test/unit/specs/dropdown.spec.js
View File

@ -46,7 +46,7 @@ describe('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-menu slot="dropdown">
<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>
@ -81,7 +81,7 @@ describe('Dropdown', () => {
<span class="el-dropdown-link">
下拉菜单trigger click<i class="el-icon-caret-bottom el-icon-right"></i>
</span>
<el-dropdown-menu slot="dropdown" class="dropdown-test-menu-click">
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item @click.native="handleClick">狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
@ -147,4 +147,38 @@ describe('Dropdown', () => {
}, 300);
}, 300);
});
it('hide on click', done => {
vm = createVue({
template: `
<el-dropdown ref="dropdown" :hide-on-click="false">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<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>
`
}, true);
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(_ => {
vm.$refs.commandC.$el.click();
setTimeout(_ => {
expect(dropdown.visible).to.true;
expect(callback.calledWith('c')).to.be.true;
done();
}, 300);
}, 300);
});
});