blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] DropdownMenu: optimize transition

Browse Source
This commit is contained in:
陈嘉涵 2019-05-23 19:56:07 +08:00
parent d7e5ee40b5
commit 9bce0aa31b
4 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/dropdown-item/index.js
View File

@ -1,4 +1,4 @@
import { use, isDef } from '../utils'; import { use } from '../utils';
import Cell from '../cell'; import Cell from '../cell';
import Icon from '../icon'; import Icon from '../icon';
import Popup from '../popup'; import Popup from '../popup';
@ -19,7 +19,9 @@ export default sfc({
data() { data() {
return { return {
show: false transition: true,
showPopup: false,
showWrapper: false
}; };
}, },
@ -36,7 +38,19 @@ export default sfc({
methods: { methods: {
toggle(show) { toggle(show) {
this.show = isDef(show) ? show : !this.show; this.showPopup = !this.showPopup;
if (this.showPopup) {
this.showWrapper = true;
}
},
hide(skipTransition) {
this.showPopup = false;
if (skipTransition) {
this.transition = false;
}
} }
}, },
@ -52,7 +66,7 @@ export default sfc({
title={option.text} title={option.text}
titleStyle={{ color: active ? activeColor : '' }} titleStyle={{ color: active ? activeColor : '' }}
onClick={() => { onClick={() => {
this.show = false; this.showPopup = false;
if (option.value !== this.value) { if (option.value !== this.value) {
this.$emit('input', option.value); this.$emit('input', option.value);
@ -68,11 +82,11 @@ export default sfc({
const emit = eventName => () => this.$emit(eventName); const emit = eventName => () => this.$emit(eventName);
return ( return (
<div vShow={this.show} style={{ top: `${top}px`, zIndex }} class={bem()}> <div vShow={this.showWrapper} style={{ top: `${top}px`, zIndex }} class={bem()}>
<Popup <Popup
vModel={this.show} vModel={this.showPopup}
position="top" position="top"
duration={0.2} duration={this.transition ? 0.2 : 0}
class={bem('content')} class={bem('content')}
overlay={overlay} overlay={overlay}
closeOnClickOverlay={closeOnClickOverlay} closeOnClickOverlay={closeOnClickOverlay}
@ -80,6 +94,11 @@ export default sfc({
onOpen={emit('open')} onOpen={emit('open')}
onOpened={emit('opened')} onOpened={emit('opened')}
onClose={emit('close')} onClose={emit('close')}
onClosed={() => {
this.transition = true;
this.showWrapper = false;
this.$emit('closed');
}}
> >
{Options} {Options}
{this.slots('default')} {this.slots('default')}

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

@ -45,15 +45,15 @@ export default sfc({
this.children.forEach((item, index) => { this.children.forEach((item, index) => {
if (index === active) { if (index === active) {
item.toggle(); item.toggle();
} else { } else if (item.showPopup) {
item.toggle(false); item.hide(true);
} }
}); });
}, },
onClickOutside() { onClickOutside() {
this.children.forEach(item => { this.children.forEach(item => {
item.toggle(false); item.hide();
}); });
} }
}, },
@ -70,7 +70,7 @@ export default sfc({
> >
<span <span
class={[bem('title', { active: item.show }), item.titleClass]} class={[bem('title', { active: item.show }), item.titleClass]}
style={{ color: item.show ? this.activeColor : '' }} style={{ color: item.showPopup ? this.activeColor : '' }}
> >
{item.displayTitle} {item.displayTitle}
</span> </span>

12
packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
View File

@ -4,8 +4,8 @@ exports[`click option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div> <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div> <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;"> <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
<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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2005;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable"> <div class="van-cell van-cell--clickable">
<div class="van-cell__title" style=""><span>A</span></div> <div class="van-cell__title" style=""><span>A</span></div>
</div> </div>
@ -56,7 +56,7 @@ exports[`disable dropdown item 1`] = `
exports[`show dropdown item 1`] = ` exports[`show dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active" style="color: rgb(25, 137, 250);">A</span></div> <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div> <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10;"> <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top"> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
@ -81,7 +81,7 @@ exports[`show dropdown item 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div> <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div> <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;"> <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
<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-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"> <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__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
@ -103,8 +103,8 @@ exports[`show dropdown item 2`] = `
exports[`show dropdown item 3`] = ` exports[`show dropdown item 3`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu van-hairline--top-bottom">
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div> <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
<div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active" style="color: rgb(25, 137, 250);">A</span></div> <div class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="color: rgb(25, 137, 250);">A</span></div>
<div class="van-dropdown-item" style="top: 0px; z-index: 10; display: none;"> <div class="van-dropdown-item" style="top: 0px; z-index: 10;">
<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-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"> <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__title" style="color: rgb(25, 137, 250);"><span>A</span></div>

3
packages/dropdown-menu/test/index.spec.js
View File

@ -53,8 +53,9 @@ test('click option', async () => {
titles.at(0).trigger('click'); titles.at(0).trigger('click');
const options = wrapper.findAll('.van-dropdown-item .van-cell'); const options = wrapper.findAll('.van-dropdown-item .van-cell');
options.at(1).trigger('click'); options.at(1).trigger('click');
await later();
expect(wrapper).toMatchSnapshot(); expect(wrapper).toMatchSnapshot();
}); });