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

style(DropdownMenu): add box-shadow style

Browse Source
This commit is contained in:
chenjiahan 2020-04-19 15:37:50 +08:00
parent 2364c4f526
commit 7db7449095
5 changed files with 145 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
// Utils // Utils
import { createNamespace } from '../utils'; import { createNamespace, isDef } from '../utils';
import { BORDER_TOP_BOTTOM } from '../utils/constant';
import { getScroller } from '../utils/dom/scroll'; import { getScroller } from '../utils/dom/scroll';
// Mixins // Mixins
@ -49,15 +48,27 @@ export default createComponent({
scroller() { scroller() {
return getScroller(this.$el); return getScroller(this.$el);
}, },
opened() {
return this.children.some((item) => item.showWrapper);
},
barStyle() {
if (this.opened && isDef(this.zIndex)) {
return {
zIndex: 1 + this.zIndex,
};
}
},
}, },
methods: { methods: {
updateOffset() { updateOffset() {
if (!this.$refs.menu) { if (!this.$refs.bar) {
return; return;
} }
const rect = this.$refs.menu.getBoundingClientRect(); const rect = this.$refs.bar.getBoundingClientRect();
if (this.direction === 'down') { if (this.direction === 'down') {
this.offset = rect.bottom; this.offset = rect.bottom;
@ -113,8 +124,14 @@ export default createComponent({
)); ));
return ( return (
<div ref="menu" class={[bem(), BORDER_TOP_BOTTOM]}> <div class={bem()}>
{Titles} <div
ref="bar"
style={this.barStyle}
class={bem('bar', { opened: this.opened })}
>
{Titles}
</div>
{this.slots('default')} {this.slots('default')}
</div> </div>
); );

21
src/dropdown-menu/index.less
View File

@ -1,11 +1,20 @@
@import '../style/var'; @import '../style/var';
.van-dropdown-menu { .van-dropdown-menu {
display: flex;
height: @dropdown-menu-height;
background-color: @dropdown-menu-background-color;
user-select: none; user-select: none;
&__bar {
position: relative;
display: flex;
height: @dropdown-menu-height;
background-color: @dropdown-menu-background-color;
box-shadow: 0 2px 12px fade(@gray-7, 8);
&--opened {
z-index: @dropdown-item-z-index + 1;
}
}
&__item { &__item {
display: flex; display: flex;
flex: 1; flex: 1;
@ -44,7 +53,7 @@
right: -4px; right: -4px;
margin-top: -5px; margin-top: -5px;
border: 3px solid; border: 3px solid;
border-color: transparent transparent currentColor currentColor; border-color: transparent transparent @gray-4 @gray-4;
transform: rotate(-45deg); transform: rotate(-45deg);
opacity: 0.8; opacity: 0.8;
content: ''; content: '';
@ -52,6 +61,10 @@
&--active { &--active {
color: @dropdown-menu-title-active-text-color; color: @dropdown-menu-title-active-text-color;
&::after {
border-color: transparent transparent currentColor currentColor;
}
} }
&--down { &--down {

40
src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
View File

@ -3,9 +3,11 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div> <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
<!----> <!---->
@ -19,9 +21,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div> <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
<!----> <!---->
@ -35,9 +39,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div> <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
<!----> <!---->
@ -51,9 +57,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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">全部商品</div></span></div> <div class="van-dropdown-menu__bar">
<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">默认排序</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">全部商品</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">默认排序</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
<!----> <!---->
@ -67,9 +75,11 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div> <div class="van-dropdown-menu__bar">
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div> <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
<!----> <!---->

124
src/dropdown-menu/test/__snapshots__/index.spec.js.snap
View File

@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`click option 1`] = ` exports[`click option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar van-dropdown-menu__bar--opened">
<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>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div> <div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
@ -28,9 +30,11 @@ exports[`click option 1`] = `
`; `;
exports[`close-on-click-outside 1`] = ` exports[`close-on-click-outside 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar van-dropdown-menu__bar--opened">
<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 role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<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">
@ -54,8 +58,10 @@ exports[`close-on-click-outside 1`] = `
`; `;
exports[`destroy one item 1`] = ` exports[`destroy one item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar">
<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>
<!----> <!---->
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
@ -66,9 +72,11 @@ exports[`destroy one item 1`] = `
`; `;
exports[`didn\`t find matched option 1`] = ` exports[`didn\`t find matched option 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div> <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
<!----> <!---->
@ -83,9 +91,11 @@ exports[`didn\`t find matched option 1`] = `
`; `;
exports[`direction up 1`] = ` exports[`direction up 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar">
<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>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
<!----> <!---->
@ -100,9 +110,11 @@ exports[`direction up 1`] = `
`; `;
exports[`direction up 2`] = ` exports[`direction up 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div> <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
<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--active"><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>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px;"> <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px;">
<div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom"> <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
@ -126,9 +138,11 @@ exports[`direction up 2`] = `
`; `;
exports[`disable close-on-click-outside 1`] = ` exports[`disable close-on-click-outside 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div> <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
<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 van-dropdown-menu__title--active 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"><div class="van-ellipsis">A</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<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">
@ -152,8 +166,10 @@ exports[`disable close-on-click-outside 1`] = `
`; `;
exports[`disable dropdown item 1`] = ` exports[`disable dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div> <div class="van-dropdown-menu__bar">
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
<!----> <!---->
@ -163,9 +179,11 @@ exports[`disable dropdown item 1`] = `
`; `;
exports[`render option icon 1`] = ` exports[`render option icon 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div> <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
<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 van-dropdown-menu__title--active 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"><div class="van-ellipsis">A</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<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">
@ -191,9 +209,11 @@ exports[`render option icon 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">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div> <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
<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 van-dropdown-menu__title--active 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"><div class="van-ellipsis">A</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<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">
@ -217,9 +237,11 @@ exports[`show dropdown item 1`] = `
`; `;
exports[`show dropdown item 2`] = ` exports[`show dropdown item 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar van-dropdown-menu__bar--opened">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active 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"><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--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
@ -252,9 +274,11 @@ 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">
<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-menu__bar van-dropdown-menu__bar--opened">
<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 role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
@ -287,9 +311,11 @@ exports[`show dropdown item 3`] = `
`; `;
exports[`title prop 1`] = ` exports[`title prop 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div> <div class="van-dropdown-menu__bar">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div> <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
<!----> <!---->
@ -304,10 +330,12 @@ exports[`title prop 1`] = `
`; `;
exports[`title slot 1`] = ` exports[`title slot 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"> <div class="van-dropdown-menu__bar">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
Custom Title Custom Title
</div></span></div> </div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
<!----> <!---->
@ -317,23 +345,27 @@ exports[`title slot 1`] = `
`; `;
exports[`toggle method 1`] = ` exports[`toggle method 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div> <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div> <div class="van-overlay" style="z-index: 2015; animation-duration: 0s; position: absolute;" name="van-fade"></div>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016;" name="van-popup-slide-top"></div>
</div> </div>
</div> </div>
</div> </div>
`; `;
exports[`toggle method 2`] = ` exports[`toggle method 2`] = `
<div class="van-dropdown-menu van-hairline--top-bottom"> <div class="van-dropdown-menu">
<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-menu__bar van-dropdown-menu__bar--opened">
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
</div>
<div> <div>
<div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;"> <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div> <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016; display: none;" name="van-popup-slide-top"></div>
</div> </div>
</div> </div>
</div> </div>

4
src/style/var.less
View File

@ -321,14 +321,14 @@
@divider-content-right-width: 10%; @divider-content-right-width: 10%;
// DropdownMenu // DropdownMenu
@dropdown-menu-height: 50px; @dropdown-menu-height: 48px;
@dropdown-menu-background-color: @white; @dropdown-menu-background-color: @white;
@dropdown-menu-title-font-size: 15px; @dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: @text-color; @dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-active-text-color: @blue; @dropdown-menu-title-active-text-color: @blue;
@dropdown-menu-title-disabled-text-color: @gray-6; @dropdown-menu-title-disabled-text-color: @gray-6;
@dropdown-menu-title-padding: 0 @padding-xs; @dropdown-menu-title-padding: 0 @padding-xs;
@dropdown-menu-title-line-height: 18px; @dropdown-menu-title-line-height: 22px;
@dropdown-menu-option-active-color: @blue; @dropdown-menu-option-active-color: @blue;
@dropdown-menu-content-max-height: 80%; @dropdown-menu-content-max-height: 80%;
@dropdown-item-z-index: 10; @dropdown-item-z-index: 10;