alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[bugfix] DropdownMenu: cann't use toggle to open item (#3876)

Browse Source
This commit is contained in:
neverland
2019-07-17 14:40:12 +08:00
committed by GitHub
parent e6a13e8887
commit 3f33fcc525
4 changed files with 87 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/dropdown-item/index.js
View File

@@ -40,19 +40,17 @@ export default createComponent({
},
methods: {
toggle(show) {
this.showPopup = !this.showPopup;
if (this.showPopup) {
this.showWrapper = true;
toggle(show = !this.showPopup, options = {}) {
if (show === this.showPopup) {
return;
}
},
hide(skipTransition) {
this.showPopup = false;
this.transition = !options.immediate;
this.showPopup = show;
if (skipTransition) {
this.transition = false;
if (show) {
this.parent.updateOffset();
this.showWrapper = true;
}
}
},
@@ -120,7 +118,6 @@ export default createComponent({
onClose={this.onClose}
onOpened={this.onOpened}
onClosed={() => {
this.transition = true;
this.showWrapper = false;
this.$emit('closed');
}}

8
src/dropdown-menu/index.js
View File

@@ -48,7 +48,7 @@ export default createComponent({
},
methods: {
toggleItem(active) {
updateOffset() {
const { menu } = this.$refs;
const rect = menu.getBoundingClientRect();
@@ -57,19 +57,21 @@ export default createComponent({
} else {
this.offset = window.innerHeight - rect.top;
}
},
toggleItem(active) {
this.children.forEach((item, index) => {
if (index === active) {
item.toggle();
} else if (item.showPopup) {
item.hide(true);
item.toggle(false, { immediate: true });
}
});
},
onClickOutside() {
this.children.forEach(item => {
item.hide();
item.toggle(false);
});
}
},

53
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"><div class="van-ellipsis">B</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></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: 2013;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2011;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="">
<div class="van-cell__title"><span>A</span></div>
</div>
@@ -28,7 +28,7 @@ exports[`close-on-click-outside 1`] = `
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
<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;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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);">
@@ -72,20 +72,10 @@ exports[`direction up 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 van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
<div class="van-overlay van-fade-enter-active" style="z-index: 2010; position: absolute; animation-duration: 0.2s;"></div>
<div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
<!---->
</div>
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
<!---->
</div>
</div>
@@ -97,7 +87,7 @@ exports[`disable close-on-click-outside 1`] = `
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
<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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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);">
@@ -129,7 +119,7 @@ exports[`render option icon 1`] = `
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
<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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
<!----></i>
<div class="van-cell__title"><span>A</span></div>
@@ -154,7 +144,7 @@ exports[`show dropdown item 1`] = `
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
<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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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);">
@@ -176,7 +166,7 @@ exports[`show dropdown item 2`] = `
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);"><div class="van-ellipsis">A</div></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: 0s;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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);">
@@ -189,7 +179,7 @@ exports[`show dropdown item 2`] = `
</div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
<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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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);">
@@ -208,7 +198,7 @@ exports[`show dropdown item 3`] = `
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><div class="van-ellipsis">A</div></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: 0s;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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);">
@@ -221,7 +211,7 @@ exports[`show dropdown item 3`] = `
</div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
<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;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><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);">
@@ -247,3 +237,22 @@ exports[`title prop 1`] = `
</div>
</div>
`;
exports[`toggle method 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"><div class="van-ellipsis"></div></span></div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
<div class="van-overlay van-fade-enter-active van-fade-enter-to" style="z-index: 2014; position: absolute; animation-duration: 0s;"></div>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2015;" name="van-popup-slide-top"></div>
</div>
</div>
`;
exports[`toggle method 2`] = `
<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"><div class="van-ellipsis"></div></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" style="transition-duration: 0s; z-index: 2015; display: none;" name="van-popup-slide-top"></div>
</div>
</div>
`;

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

@@ -1,19 +1,19 @@
import { mount, later } from '../../../test/utils';
import Vue from 'vue';
import DropdownMenu from '..';
import DropdownItem from '../../dropdown-item';
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
function renderWrapper(options = {}) {
return mount({
template: `
<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>
<van-dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
<van-dropdown-item v-model="value" :title="title" :options="options" />
<van-dropdown-item v-model="value" :title="title" :options="options" />
</van-dropdown-menu>
`,
components: {
DropdownItem,
DropdownMenu
},
data() {
return {
value: options.value || 0,
@@ -92,11 +92,7 @@ test('direction up', async () => {
direction: 'up'
});
await later(10);
const titles = wrapper.findAll('.van-dropdown-menu__title');
titles.at(0).trigger('click');
await later();
expect(wrapper).toMatchSnapshot();
});
@@ -130,15 +126,11 @@ test('didn`t find matched option', async () => {
test('destroy one item', async () => {
const wrapper = mount({
template: `
<dropdown-menu>
<dropdown-item v-if="render" v-model="value" :options="options" />
<dropdown-item v-model="value" :options="options" />
</dropdown-menu>
<van-dropdown-menu>
<van-dropdown-item v-if="render" v-model="value" :options="options" />
<van-dropdown-item v-model="value" :options="options" />
</van-dropdown-menu>
`,
components: {
DropdownItem,
DropdownMenu
},
data() {
return {
value: 0,
@@ -159,14 +151,10 @@ test('destroy one item', async () => {
test('disable dropdown item', async () => {
const wrapper = mount({
template: `
<dropdown-menu>
<dropdown-item disabled v-model="value" :options="options" />
</dropdown-menu>
<van-dropdown-menu>
<van-dropdown-item disabled v-model="value" :options="options" />
</van-dropdown-menu>
`,
components: {
DropdownItem,
DropdownMenu
},
data() {
return {
value: 0,
@@ -188,15 +176,11 @@ test('change event', async () => {
const wrapper = mount({
template: `
<dropdown-menu>
<dropdown-item v-model="value" :options="options" @change="onChange" />
<dropdown-item v-model="value" :options="options" />
</dropdown-menu>
<van-dropdown-menu>
<van-dropdown-item v-model="value" :options="options" @change="onChange" />
<van-dropdown-item v-model="value" :options="options" />
</van-dropdown-menu>
`,
components: {
DropdownItem,
DropdownMenu
},
data() {
return {
value: 0,
@@ -225,3 +209,26 @@ test('change event', async () => {
expect(onChange).toHaveBeenCalledWith(1);
expect(onChange).toHaveBeenCalledTimes(1);
});
test('toggle method', async done => {
const wrapper = mount({
template: `
<van-dropdown-menu>
<van-dropdown-item ref="item" />
</van-dropdown-menu>
`,
async mounted() {
// show
this.$refs.item.toggle(true, { immediate: true });
await later();
expect(wrapper).toMatchSnapshot();
// hide
this.$refs.item.toggle(false, { immediate: true });
await later();
expect(wrapper).toMatchSnapshot();
done();
}
});
});