alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages 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
Download Patch File Download Diff File Expand all files Collapse all files
packages/dropdown-menu/index.js
+4 -4
View File
@@ -45,15 +45,15 @@ export default sfc({
this.children.forEach((item, index) => {
if (index === active) {
item.toggle();
} else {
item.toggle(false);
} else if (item.showPopup) {
item.hide(true);
}
});
},
onClickOutside() {
this.children.forEach(item => {
item.toggle(false);
item.hide();
});
}
},
@@ -70,7 +70,7 @@ export default sfc({
>
<span
class={[bem('title', { active: item.show }), item.titleClass]}
style={{ color: item.show ? this.activeColor : '' }}
style={{ color: item.showPopup ? this.activeColor : '' }}
>
{item.displayTitle}
</span>
packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
+6 -6
View File
@@ -4,8 +4,8 @@ exports[`click option 1`] = `
<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-item" style="top: 0px; z-index: 10; display: none;">
<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-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; z-index: 2005;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable">
<div class="van-cell__title" style=""><span>A</span></div>
</div>
@@ -56,7 +56,7 @@ exports[`disable dropdown item 1`] = `
exports[`show dropdown item 1`] = `
<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-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">
@@ -81,7 +81,7 @@ exports[`show dropdown item 2`] = `
<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">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-cell van-cell--clickable">
<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`] = `
<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 van-dropdown-menu__title--active" 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-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;">
<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__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
packages/dropdown-menu/test/index.spec.js
+2 -1
View File
@@ -53,8 +53,9 @@ test('click option', async () => {
titles.at(0).trigger('click');
const options = wrapper.findAll('.van-dropdown-item .van-cell');
options.at(1).trigger('click');
await later();
expect(wrapper).toMatchSnapshot();
});