mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(DropdownMenu): add @dropdown-menu-title-active-text-color less var (#4208)
This commit is contained in:
parent
1cc6f03e6f
commit
2205285b38
@ -1,5 +1,5 @@
|
|||||||
import { createNamespace } from '../utils';
|
import { createNamespace } from '../utils';
|
||||||
import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
|
import { BORDER_TOP_BOTTOM } from '../utils/constant';
|
||||||
import { ParentMixin } from '../mixins/relation';
|
import { ParentMixin } from '../mixins/relation';
|
||||||
import { ClickOutsideMixin } from '../mixins/click-outside';
|
import { ClickOutsideMixin } from '../mixins/click-outside';
|
||||||
|
|
||||||
@ -15,6 +15,7 @@ export default createComponent({
|
|||||||
],
|
],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
activeColor: String,
|
||||||
overlay: {
|
overlay: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
@ -31,10 +32,6 @@ export default createComponent({
|
|||||||
type: String,
|
type: String,
|
||||||
default: 'down'
|
default: 'down'
|
||||||
},
|
},
|
||||||
activeColor: {
|
|
||||||
type: String,
|
|
||||||
default: BLUE
|
|
||||||
},
|
|
||||||
closeOnClickOverlay: {
|
closeOnClickOverlay: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
@ -91,6 +88,7 @@ export default createComponent({
|
|||||||
<span
|
<span
|
||||||
class={[
|
class={[
|
||||||
bem('title', {
|
bem('title', {
|
||||||
|
active: item.showPopup,
|
||||||
down: item.showPopup === (this.direction === 'down')
|
down: item.showPopup === (this.direction === 'down')
|
||||||
}),
|
}),
|
||||||
item.titleClass
|
item.titleClass
|
||||||
|
@ -49,6 +49,10 @@
|
|||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
color: @dropdown-menu-title-active-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
&--down {
|
&--down {
|
||||||
&::after {
|
&::after {
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
|
@ -2,17 +2,17 @@
|
|||||||
|
|
||||||
exports[`click option 1`] = `
|
exports[`click option 1`] = `
|
||||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
<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" style=""><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 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-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: 2013; 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: 2014;" name="van-popup-slide-top">
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option" style="">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
<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 van-dropdown-item__option" style="color: rgb(25, 137, 250);">
|
<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 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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -25,13 +25,13 @@ 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 van-hairline--top-bottom">
|
||||||
<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"><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 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 van-dropdown-item__option" style="color: rgb(25, 137, 250);">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
<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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
@ -81,15 +81,37 @@ exports[`direction up 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
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-item van-dropdown-item--up" style="z-index: 10; 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-cell van-cell--clickable van-dropdown-item__option">
|
||||||
|
<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">
|
||||||
|
<!----></i></div>
|
||||||
|
</div>
|
||||||
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
|
<div class="van-cell__title"><span>B</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 1000px; display: none;">
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
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 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" 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--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"><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 van-dropdown-item__option" style="color: rgb(25, 137, 250);">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
<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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
@ -114,14 +136,14 @@ 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 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" 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--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"><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 van-dropdown-item__option" 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"><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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option"><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">
|
||||||
@ -138,13 +160,13 @@ 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 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" 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--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"><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 van-dropdown-item__option" style="color: rgb(25, 137, 250);">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
<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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
@ -160,13 +182,13 @@ 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 van-hairline--top-bottom">
|
||||||
<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"><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 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-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 van-dropdown-item__option" style="color: rgb(25, 137, 250);">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
<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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
@ -176,9 +198,9 @@ exports[`show dropdown item 2`] = `
|
|||||||
</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 van-dropdown-item__option" style="color: rgb(25, 137, 250);">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
<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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
@ -191,13 +213,13 @@ 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 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"><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 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: 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 van-dropdown-item__option" style="color: rgb(25, 137, 250);">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
<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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
@ -207,9 +229,9 @@ exports[`show dropdown item 3`] = `
|
|||||||
</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 van-dropdown-item__option" style="color: rgb(25, 137, 250);">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
<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">
|
||||||
<!----></i></div>
|
<!----></i></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
<div class="van-cell van-cell--clickable van-dropdown-item__option">
|
||||||
@ -235,19 +257,19 @@ exports[`title prop 1`] = `
|
|||||||
|
|
||||||
exports[`toggle method 1`] = `
|
exports[`toggle method 1`] = `
|
||||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
<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" style="color: rgb(25, 137, 250);"><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--active van-dropdown-menu__title--down"><div class="van-ellipsis"></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-overlay" style="z-index: 2015; animation-duration: 0s; position: absolute;" name="van-fade"></div>
|
<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: 2016;" name="van-popup-slide-top"></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>
|
</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 van-hairline--top-bottom">
|
||||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style=""><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-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; z-index: 2016; 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: 2018; display: none;" name="van-popup-slide-top"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
@ -88,12 +88,21 @@ test('disable close-on-click-outside', async () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
test('direction up', async () => {
|
test('direction up', async () => {
|
||||||
|
const { innerHeight } = window;
|
||||||
|
window.innerHeight = 1000;
|
||||||
|
|
||||||
const wrapper = renderWrapper({
|
const wrapper = renderWrapper({
|
||||||
direction: 'up'
|
direction: 'up'
|
||||||
});
|
});
|
||||||
|
|
||||||
await later();
|
await later();
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
|
||||||
|
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||||
|
titles.at(0).trigger('click');
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
|
||||||
|
window.innerHeight = innerHeight;
|
||||||
});
|
});
|
||||||
|
|
||||||
test('click option', async () => {
|
test('click option', async () => {
|
||||||
|
@ -256,6 +256,7 @@
|
|||||||
@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-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;
|
@dropdown-menu-title-line-height: 18px;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user