ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-18 17:51:54 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

feat(DropdownMenu): add @dropdown-menu-title-active-text-color less var (#4208)

Browse Source
This commit is contained in:
neverland
2019-08-23 15:16:42 +08:00
committed by GitHub
parent 1cc6f03e6f
commit 2205285b38
5 changed files with 74 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
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 { ClickOutsideMixin } from '../mixins/click-outside';
@@ -15,6 +15,7 @@ export default createComponent({
],
props: {
activeColor: String,
overlay: {
type: Boolean,
default: true
@@ -31,10 +32,6 @@ export default createComponent({
type: String,
default: 'down'
},
activeColor: {
type: String,
default: BLUE
},
closeOnClickOverlay: {
type: Boolean,
default: true
@@ -91,6 +88,7 @@ export default createComponent({
<span
class={[
bem('title', {
active: item.showPopup,
down: item.showPopup === (this.direction === 'down')
}),
item.titleClass

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

@@ -49,6 +49,10 @@
content: '';
}
&--active {
color: @dropdown-menu-title-active-text-color;
}
&--down {
&::after {
margin-top: -1px;

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

@@ -2,17 +2,17 @@
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" 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 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-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 van-dropdown-item__option" style="">
<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: 2014;" name="van-popup-slide-top">
<div class="van-cell van-cell--clickable van-dropdown-item__option">
<div class="van-cell__title"><span>A</span></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__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>
</div>
</div>
@@ -25,13 +25,13 @@ 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" 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 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-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__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>
</div>
<div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -81,15 +81,37 @@ exports[`direction up 1`] = `
</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`] = `
<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 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-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__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>
</div>
<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`] = `
<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 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-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>
<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>
</div>
<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`] = `
<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 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-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__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>
</div>
<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`] = `
<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 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"><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-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__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>
</div>
<div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -176,9 +198,9 @@ exports[`show dropdown item 2`] = `
</div>
<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-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__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>
</div>
<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`] = `
<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" 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 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-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__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>
</div>
<div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -207,9 +229,9 @@ exports[`show dropdown item 3`] = `
</div>
<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-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__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>
</div>
<div class="van-cell van-cell--clickable van-dropdown-item__option">
@@ -235,19 +257,19 @@ exports[`title prop 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--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-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 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>
</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" 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-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>
`;

9
src/dropdown-menu/test/index.spec.js
View File

@@ -88,12 +88,21 @@ test('disable close-on-click-outside', async () => {
});
test('direction up', async () => {
const { innerHeight } = window;
window.innerHeight = 1000;
const wrapper = renderWrapper({
direction: 'up'
});
await later();
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 () => {

1
src/style/var.less
View File

@@ -256,6 +256,7 @@
@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-dark;
@dropdown-menu-title-padding: 0 @padding-xs;
@dropdown-menu-title-line-height: 18px;