alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages 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
5 changed files with 56 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+26 -3
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>
src/dropdown-menu/test/index.spec.js
+20 -3
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();