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

[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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 87 additions and 72 deletions
Show Stats 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: { methods: {
toggle(show) { toggle(show = !this.showPopup, options = {}) {
this.showPopup = !this.showPopup; if (show === this.showPopup) {
return;
if (this.showPopup) {
this.showWrapper = true;
} }
},
hide(skipTransition) { this.transition = !options.immediate;
this.showPopup = false; this.showPopup = show;
if (skipTransition) { if (show) {
this.transition = false; this.parent.updateOffset();
this.showWrapper = true;
} }
} }
}, },
@ -120,7 +118,6 @@ export default createComponent({
onClose={this.onClose} onClose={this.onClose}
onOpened={this.onOpened} onOpened={this.onOpened}
onClosed={() => { onClosed={() => {
this.transition = true;
this.showWrapper = false; this.showWrapper = false;
this.$emit('closed'); this.$emit('closed');
}} }}

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

@ -48,7 +48,7 @@ export default createComponent({
}, },
methods: { methods: {
toggleItem(active) { updateOffset() {
const { menu } = this.$refs; const { menu } = this.$refs;
const rect = menu.getBoundingClientRect(); const rect = menu.getBoundingClientRect();
@ -57,19 +57,21 @@ export default createComponent({
} else { } else {
this.offset = window.innerHeight - rect.top; this.offset = window.innerHeight - rect.top;
} }
},
toggleItem(active) {
this.children.forEach((item, index) => { this.children.forEach((item, index) => {
if (index === active) { if (index === active) {
item.toggle(); item.toggle();
} else if (item.showPopup) { } else if (item.showPopup) {
item.hide(true); item.toggle(false, { immediate: true });
} }
}); });
}, },
onClickOutside() { onClickOutside() {
this.children.forEach(item => { 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 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-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 van-cell--clickable" style="">
<div class="van-cell__title"><span>A</span></div> <div class="van-cell__title"><span>A</span></div>
</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 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-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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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);"> <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 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 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-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
<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> </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>
</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 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-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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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);"> <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 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-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-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"> <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> <!----></i>
<div class="van-cell__title"><span>A</span></div> <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 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-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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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);"> <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" 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 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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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);"> <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>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;"> <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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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);"> <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 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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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);"> <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>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;"> <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-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 van-cell--clickable" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>A</span></div> <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);"> <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>
</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 { mount, later } from '../../../test/utils';
import Vue from 'vue';
import DropdownMenu from '..'; import DropdownMenu from '..';
import DropdownItem from '../../dropdown-item'; import DropdownItem from '../../dropdown-item';
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
function renderWrapper(options = {}) { function renderWrapper(options = {}) {
return mount({ return mount({
template: ` template: `
<dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside"> <van-dropdown-menu :direction="direction" :close-on-click-outside="closeOnClickOutside">
<dropdown-item v-model="value" :title="title" :options="options" /> <van-dropdown-item v-model="value" :title="title" :options="options" />
<dropdown-item v-model="value" :title="title" :options="options" /> <van-dropdown-item v-model="value" :title="title" :options="options" />
</dropdown-menu> </van-dropdown-menu>
`, `,
components: {
DropdownItem,
DropdownMenu
},
data() { data() {
return { return {
value: options.value || 0, value: options.value || 0,
@ -92,11 +92,7 @@ test('direction up', async () => {
direction: 'up' direction: 'up'
}); });
await later(10); await later();
const titles = wrapper.findAll('.van-dropdown-menu__title');
titles.at(0).trigger('click');
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });
@ -130,15 +126,11 @@ test('didn`t find matched option', async () => {
test('destroy one item', async () => { test('destroy one item', async () => {
const wrapper = mount({ const wrapper = mount({
template: ` template: `
<dropdown-menu> <van-dropdown-menu>
<dropdown-item v-if="render" v-model="value" :options="options" /> <van-dropdown-item v-if="render" v-model="value" :options="options" />
<dropdown-item v-model="value" :options="options" /> <van-dropdown-item v-model="value" :options="options" />
</dropdown-menu> </van-dropdown-menu>
`, `,
components: {
DropdownItem,
DropdownMenu
},
data() { data() {
return { return {
value: 0, value: 0,
@ -159,14 +151,10 @@ test('destroy one item', async () => {
test('disable dropdown item', async () => { test('disable dropdown item', async () => {
const wrapper = mount({ const wrapper = mount({
template: ` template: `
<dropdown-menu> <van-dropdown-menu>
<dropdown-item disabled v-model="value" :options="options" /> <van-dropdown-item disabled v-model="value" :options="options" />
</dropdown-menu> </van-dropdown-menu>
`, `,
components: {
DropdownItem,
DropdownMenu
},
data() { data() {
return { return {
value: 0, value: 0,
@ -188,15 +176,11 @@ test('change event', async () => {
const wrapper = mount({ const wrapper = mount({
template: ` template: `
<dropdown-menu> <van-dropdown-menu>
<dropdown-item v-model="value" :options="options" @change="onChange" /> <van-dropdown-item v-model="value" :options="options" @change="onChange" />
<dropdown-item v-model="value" :options="options" /> <van-dropdown-item v-model="value" :options="options" />
</dropdown-menu> </van-dropdown-menu>
`, `,
components: {
DropdownItem,
DropdownMenu
},
data() { data() {
return { return {
value: 0, value: 0,
@ -225,3 +209,26 @@ test('change event', async () => {
expect(onChange).toHaveBeenCalledWith(1); expect(onChange).toHaveBeenCalledWith(1);
expect(onChange).toHaveBeenCalledTimes(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();
}
});
});