blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] DropdownMenu: add close-on-click-outside prop (#3824)

Browse Source
This commit is contained in:
neverland 2019-07-11 16:56:44 +08:00 committed by GitHub
parent 22f28b44ff
commit db8428dd19
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/dropdown-menu/README.md
View File

@ -106,6 +106,7 @@ export default {
| direction | Expand direction, can be set to `up` | `String` | `down` |
| overlay | Whether to show overlay | `Boolean` | `true` |
| close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
| close-on-click-outside | Whether to close when click outside | `Boolean` | `true` |
### DropdownItem Props

1
src/dropdown-menu/README.zh-CN.md
View File

@ -110,6 +110,7 @@ export default {
| direction | 菜单展开方向，可选值为`up` | `String` | `down` | 2.0.1 |
| overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | `Boolean` | `true` | - |
| close-on-click-outside | 是否在点击外部元素后关闭菜单 | `Boolean` | `true` | 2.0.7 |
### DropdownItem Props

29
src/dropdown-menu/test/__snapshots__/index.spec.js.snap
View File

@ -5,7 +5,7 @@ exports[`click option 1`] = `
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2009;">
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2011;">
<div class="van-cell van-cell--clickable">
<div class="van-cell__title" style=""><span>A</span></div>
</div>
@ -22,7 +22,7 @@ exports[`click option 1`] = `
</div>
`;
exports[`close on click outside 1`] = `
exports[`close-on-click-outside 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
@ -83,7 +83,7 @@ exports[`direction up 1`] = `
<div class="van-cell__title"><span>B</span></div>
</div>
</div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-overlay van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
</div>
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
<!---->
@ -91,6 +91,29 @@ exports[`direction up 1`] = `
</div>
`;
exports[`disable close-on-click-outside 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
<div class="van-cell van-cell--clickable">
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
<!----></i></div>
</div>
<div class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>B</span></div>
</div>
</div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
</div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!---->
</div>
</div>
`;
exports[`disable dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>

23
src/dropdown-menu/test/index.spec.js
View File

@ -5,7 +5,7 @@ import DropdownItem from '../../dropdown-item';
function renderWrapper(options = {}) {
return mount({
template: `
<dropdown-menu :direction="direction">
<dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
<dropdown-item v-model="value" :title="title" :options="options" />
<dropdown-item v-model="value" :title="title" :options="options" />
</dropdown-menu>
@ -19,6 +19,7 @@ function renderWrapper(options = {}) {
value: options.value || 0,
title: options.title || '',
direction: options.direction || 'down',
closeOnClickOutside: options.closeOnClickOutside,
options: [
{ text: 'A', value: 0 },
{ text: 'B', value: 1 }
@ -45,8 +46,24 @@ test('show dropdown item', async () => {
expect(wrapper).toMatchSnapshot();
});
test('close on click outside', async () => {
const wrapper = renderWrapper();
test('close-on-click-outside', async () => {
const wrapper = renderWrapper({
closeOnClickOutside: true
});
await later();
const titles = wrapper.findAll('.van-dropdown-menu__title');
titles.at(0).trigger('click');
document.body.click();
expect(wrapper).toMatchSnapshot();
});
test('disable close-on-click-outside', async () => {
const wrapper = renderWrapper({
closeOnClickOutside: false
});
await later();

9
src/mixins/click-outside.ts
View File

@ -11,9 +11,16 @@ export type ClickOutsideMixinConfig = {
export const ClickOutsideMixin = (config: ClickOutsideMixinConfig) =>
Vue.extend({
props: {
closeOnClickOutside: {
type: Boolean,
default: true
}
},
data() {
const clickOutsideHandler = (event: Event) => {
if (!this.$el.contains(event.target as Node)) {
if (this.closeOnClickOutside && !this.$el.contains(event.target as Node)) {
(this as any)[config.method]();
}
};