ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-21 19:24:16 +00:00
Code Issues Actions 4 Packages 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
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
import { createNamespace } from '../utils';
import { BORDER_TOP_BOTTOM } from '../utils/constant';
import { createNamespace, isDef } from '../utils';
import { getScroller } from '../utils/dom/scroll';
// Mixins
@@ -49,15 +48,27 @@ export default createComponent({
scroller() {
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: {
updateOffset() {
if (!this.$refs.menu) {
if (!this.$refs.bar) {
return;
}
const rect = this.$refs.menu.getBoundingClientRect();
const rect = this.$refs.bar.getBoundingClientRect();
if (this.direction === 'down') {
this.offset = rect.bottom;
@@ -113,8 +124,14 @@ export default createComponent({
));
return (
<div ref="menu" class={[bem(), BORDER_TOP_BOTTOM]}>
{Titles}
<div class={bem()}>
<div
ref="bar"
style={this.barStyle}
class={bem('bar', { opened: this.opened })}
>
{Titles}
</div>
{this.slots('default')}
</div>
);

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

@@ -1,11 +1,20 @@
@import '../style/var';
.van-dropdown-menu {
display: flex;
height: @dropdown-menu-height;
background-color: @dropdown-menu-background-color;
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 {
display: flex;
flex: 1;
@@ -44,7 +53,7 @@
right: -4px;
margin-top: -5px;
border: 3px solid;
border-color: transparent transparent currentColor currentColor;
border-color: transparent transparent @gray-4 @gray-4;
transform: rotate(-45deg);
opacity: 0.8;
content: '';
@@ -52,6 +61,10 @@
&--active {
color: @dropdown-menu-title-active-text-color;
&::after {
border-color: transparent transparent currentColor currentColor;
}
}
&--down {

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

@@ -3,9 +3,11 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<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 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">
<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>
<div>
<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 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 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">
<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>
<div>
<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 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 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">
<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>
<div>
<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 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">全部商品</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 class="van-dropdown-menu">
<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>
<div>
<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 class="van-dropdown-menu van-hairline--top-bottom">
<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 class="van-dropdown-menu">
<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>
<div>
<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
exports[`click option 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">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-menu">
<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>
<div>
<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>
@@ -28,9 +30,11 @@ exports[`click option 1`] = `
`;
exports[`close-on-click-outside 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">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-menu">
<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>
<div>
<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">
@@ -54,8 +58,10 @@ exports[`close-on-click-outside 1`] = `
`;
exports[`destroy one item 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">A</div></span></div>
<div class="van-dropdown-menu">
<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 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`] = `
<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 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">
<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>
<div>
<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`] = `
<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-menu">
<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>
<div>
<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`] = `
<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--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 class="van-dropdown-menu">
<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"><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 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">
@@ -126,9 +138,11 @@ exports[`direction up 2`] = `
`;
exports[`disable close-on-click-outside 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--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 class="van-dropdown-menu">
<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>
<div>
<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">
@@ -152,8 +166,10 @@ exports[`disable close-on-click-outside 1`] = `
`;
exports[`disable dropdown item 1`] = `
<div class="van-dropdown-menu van-hairline--top-bottom">
<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">
<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 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`] = `
<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--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 class="van-dropdown-menu">
<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>
<div>
<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">
@@ -191,9 +209,11 @@ exports[`render option icon 1`] = `
`;
exports[`show dropdown item 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--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 class="van-dropdown-menu">
<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>
<div>
<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">
@@ -217,9 +237,11 @@ exports[`show dropdown item 1`] = `
`;
exports[`show dropdown item 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">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 class="van-dropdown-menu">
<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>
<div>
<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">
@@ -252,9 +274,11 @@ exports[`show dropdown item 2`] = `
`;
exports[`show dropdown item 3`] = `
<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">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-menu">
<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>
<div>
<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">
@@ -287,9 +311,11 @@ exports[`show dropdown item 3`] = `
`;
exports[`title prop 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">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 class="van-dropdown-menu">
<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>
<div>
<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`] = `
<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 class="van-dropdown-menu">
<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
</div></span></div>
</div>
<div>
<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`] = `
<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--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
<div class="van-dropdown-menu">
<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 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-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></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: 2016;" name="van-popup-slide-top"></div>
</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-menu">
<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 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>

4
src/style/var.less
View File

@@ -321,14 +321,14 @@
@divider-content-right-width: 10%;
// DropdownMenu
@dropdown-menu-height: 50px;
@dropdown-menu-height: 48px;
@dropdown-menu-background-color: @white;
@dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-active-text-color: @blue;
@dropdown-menu-title-disabled-text-color: @gray-6;
@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-content-max-height: 80%;
@dropdown-item-z-index: 10;