From db8428dd1946f5514a88cd4c523861d777792527 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 11 Jul 2019 16:56:44 +0800 Subject: [PATCH] [new feature] DropdownMenu: add close-on-click-outside prop (#3824) --- src/dropdown-menu/README.md | 1 + src/dropdown-menu/README.zh-CN.md | 1 + .../test/__snapshots__/index.spec.js.snap | 29 +++++++++++++++++-- src/dropdown-menu/test/index.spec.js | 23 +++++++++++++-- src/mixins/click-outside.ts | 9 +++++- 5 files changed, 56 insertions(+), 7 deletions(-) diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index b794cf9a6..7281604ae 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -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 diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 6c79b60ae..02ea6b15d 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -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 diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap index e6084ce8f..27bbff4f3 100644 --- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap +++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap @@ -5,7 +5,7 @@ exports[`click option 1`] = `
B
B
-
+
A
@@ -22,7 +22,7 @@ exports[`click option 1`] = `
`; -exports[`close on click outside 1`] = ` +exports[`close-on-click-outside 1`] = `
A
A
@@ -83,7 +83,7 @@ exports[`direction up 1`] = `
B
-
+
`; +exports[`disable close-on-click-outside 1`] = ` +
+
A
+
A
+
+
+
+
A
+
+
+
+
+
B
+
+
+
+
+ +
+`; + exports[`disable dropdown item 1`] = `
A
diff --git a/src/dropdown-menu/test/index.spec.js b/src/dropdown-menu/test/index.spec.js index a57d579b0..b63cf2d8a 100644 --- a/src/dropdown-menu/test/index.spec.js +++ b/src/dropdown-menu/test/index.spec.js @@ -5,7 +5,7 @@ import DropdownItem from '../../dropdown-item'; function renderWrapper(options = {}) { return mount({ template: ` - + @@ -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(); diff --git a/src/mixins/click-outside.ts b/src/mixins/click-outside.ts index b3bb673bd..068bc8e6c 100644 --- a/src/mixins/click-outside.ts +++ b/src/mixins/click-outside.ts @@ -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](); } };