blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-26 00:09:15 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] DropdownMenu: incorrect style when inside NavBar (#4098)

Browse Source
This commit is contained in:
neverland 2019-08-12 16:55:01 +08:00 committed by GitHub
parent f728931527
commit 432fdcbe87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/dropdown-item/index.js
View File

@ -82,6 +82,7 @@ export default createComponent({
key={option.value} key={option.value}
icon={option.icon} icon={option.icon}
title={option.text} title={option.text}
class={bem('option')}
style={{ color: active ? activeColor : '' }} style={{ color: active ? activeColor : '' }}
onClick={() => { onClick={() => {
this.showPopup = false; this.showPopup = false;

4
src/dropdown-item/index.less
View File

@ -6,6 +6,10 @@
left: 0; left: 0;
overflow: hidden; overflow: hidden;
&__option {
text-align: left;
}
&--up { &--up {
top: 0; top: 0;
} }

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

@ -35,11 +35,13 @@
padding: @dropdown-menu-title-padding; padding: @dropdown-menu-title-padding;
color: @dropdown-menu-title-text-color; color: @dropdown-menu-title-text-color;
font-size: @dropdown-menu-title-font-size; font-size: @dropdown-menu-title-font-size;
line-height: @dropdown-menu-title-line-height;
&::after { &::after {
position: absolute; position: absolute;
top: 3px; top: 50%;
right: -4px; right: -4px;
margin-top: -5px;
border: 3px solid; border: 3px solid;
border-color: transparent transparent currentColor currentColor; border-color: transparent transparent currentColor currentColor;
transform: rotate(-45deg); transform: rotate(-45deg);
@ -49,7 +51,7 @@
&--down { &--down {
&::after { &::after {
top: 7px; margin-top: -1px;
transform: rotate(135deg); transform: rotate(135deg);
} }
} }

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

@ -7,10 +7,10 @@ exports[`click option 1`] = `
<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" style="z-index: 2011; animation-duration: 0.2s; position: absolute;" name="van-fade"></div> <div class="van-overlay" style="z-index: 2011; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2012;" 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: 2012;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable" style=""> <div class="van-cell van-cell--clickable van-dropdown-item__option" style="">
<div class="van-cell__title"><span>A</span></div> <div class="van-cell__title"><span>A</span></div>
</div> </div>
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"> <div class="van-cell van-cell--clickable van-dropdown-item__option" style="color: rgb(25, 137, 250);">
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</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);">
<!----></i></div> <!----></i></div>
@ -29,12 +29,12 @@ 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-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" style="color: rgb(25, 137, 250);"> <div class="van-cell van-cell--clickable van-dropdown-item__option" 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);">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="van-cell van-cell--clickable"> <div class="van-cell van-cell--clickable van-dropdown-item__option">
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
@ -87,12 +87,12 @@ 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-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">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"> <div class="van-cell van-cell--clickable van-dropdown-item__option" 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);">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="van-cell van-cell--clickable"> <div class="van-cell van-cell--clickable van-dropdown-item__option">
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
@ -118,13 +118,13 @@ 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-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">
<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 van-dropdown-item__option" 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>
<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);">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-success van-cell__left-icon"> <div class="van-cell van-cell--clickable van-dropdown-item__option"><i class="van-icon van-icon-success van-cell__left-icon">
<!----></i> <!----></i>
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
@ -142,12 +142,12 @@ 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-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">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"> <div class="van-cell van-cell--clickable van-dropdown-item__option" 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);">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="van-cell van-cell--clickable"> <div class="van-cell van-cell--clickable van-dropdown-item__option">
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
@ -164,24 +164,24 @@ exports[`show dropdown item 2`] = `
<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" 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">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"> <div class="van-cell van-cell--clickable van-dropdown-item__option" 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);">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="van-cell van-cell--clickable"> <div class="van-cell van-cell--clickable van-dropdown-item__option">
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
</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-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">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"> <div class="van-cell van-cell--clickable van-dropdown-item__option" 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);">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="van-cell van-cell--clickable"> <div class="van-cell van-cell--clickable van-dropdown-item__option">
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
@ -195,24 +195,24 @@ 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 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" 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">
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"> <div class="van-cell van-cell--clickable van-dropdown-item__option" 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);">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="van-cell van-cell--clickable"> <div class="van-cell van-cell--clickable van-dropdown-item__option">
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
</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-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" style="color: rgb(25, 137, 250);"> <div class="van-cell van-cell--clickable van-dropdown-item__option" 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);">
<!----></i></div> <!----></i></div>
</div> </div>
<div class="van-cell van-cell--clickable"> <div class="van-cell van-cell--clickable van-dropdown-item__option">
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>

1
src/style/var.less
View File

@ -258,6 +258,7 @@
@dropdown-menu-title-text-color: @text-color; @dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-disabled-text-color: @gray-dark; @dropdown-menu-title-disabled-text-color: @gray-dark;
@dropdown-menu-title-padding: 0 @padding-xs; @dropdown-menu-title-padding: 0 @padding-xs;
@dropdown-menu-title-line-height: 18px;
// Field // Field
@field-label-width: 90px; @field-label-width: 90px;