Skip to content

Commit dbe56fd

Browse files
chenjiahanchenjiahan
authored
[new feature] DropdownMenu: add icon option (youzan#3855)
1 parent d15315b commit dbe56fd

5 files changed

Lines changed: 83 additions & 28 deletions

File tree

‎src/dropdown-item/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,9 @@ export default createComponent({
8282
<Cell
8383
clickable
8484
key={option.value}
85+
icon={option.icon}
8586
title={option.text}
86-
titleStyle={{ color: active ? activeColor : '' }}
87+
style={{ color: active ? activeColor : '' }}
8788
onClick={() => {
8889
this.showPopup = false;
8990

‎src/dropdown-menu/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,3 +134,11 @@ Use ref to get DropdownItem instance and call instance methods
134134
| Name | Attribute | Return value | Description |
135135
|------|------|------|------|
136136
| toggle | show: boolean | - | Toggle display |
137+
138+
### Data Structure of Option
139+
140+
| Key | Description | Type |
141+
|------|------|------|
142+
| text | Text | `string` |
143+
| value | Value | `string | number` |
144+
| icon | Left icon | `string` |

‎src/dropdown-menu/README.zh-CN.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,3 +138,11 @@ export default {
138138
| 方法名 | 参数 | 返回值 | 介绍 |
139139
|------|------|------|------|
140140
| toggle | show: boolean | - | 切换菜单是否展示 |
141+
142+
### Option 数据结构
143+
144+
| 键名 | 说明 | 类型 |
145+
|------|------|------|
146+
| text | 文字 | `string` |
147+
| value | 标识符 | `string | number` |
148+
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `string` |

‎src/dropdown-menu/test/__snapshots__/index.spec.js.snap‎

Lines changed: 49 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ exports[`click option 1`] = `
55
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
66
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
77
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
8-
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2011;">
9-
<div class="van-cell van-cell--clickable">
10-
<div class="van-cell__title" style=""><span>A</span></div>
8+
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2013;">
9+
<div class="van-cell van-cell--clickable" style="">
10+
<div class="van-cell__title"><span>A</span></div>
1111
</div>
12-
<div class="van-cell van-cell--clickable">
13-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>B</span></div>
12+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
13+
<div class="van-cell__title"><span>B</span></div>
1414
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
1515
<!----></i></div>
1616
</div>
@@ -27,10 +27,10 @@ exports[`close-on-click-outside 1`] = `
2727
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
2828
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
2929
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
30-
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
30+
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
3131
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
32-
<div class="van-cell van-cell--clickable">
33-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
32+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
33+
<div class="van-cell__title"><span>A</span></div>
3434
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
3535
<!----></i></div>
3636
</div>
@@ -73,10 +73,10 @@ exports[`direction up 1`] = `
7373
<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>
7474
<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>
7575
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
76-
<div class="van-overlay van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
76+
<div class="van-overlay van-fade-enter-active" style="z-index: 2010; position: absolute; animation-duration: 0.2s;"></div>
7777
<div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
78-
<div class="van-cell van-cell--clickable">
79-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
78+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
79+
<div class="van-cell__title"><span>A</span></div>
8080
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
8181
<!----></i></div>
8282
</div>
@@ -96,10 +96,10 @@ exports[`disable close-on-click-outside 1`] = `
9696
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
9797
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
9898
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
99-
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
99+
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2008; position: absolute; animation-duration: 0.2s;"></div>
100100
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
101-
<div class="van-cell van-cell--clickable">
102-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
101+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
102+
<div class="van-cell__title"><span>A</span></div>
103103
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
104104
<!----></i></div>
105105
</div>
@@ -123,15 +123,40 @@ exports[`disable dropdown item 1`] = `
123123
</div>
124124
`;
125125

126+
exports[`render option icon 1`] = `
127+
<div class="van-dropdown-menu van-hairline--top-bottom">
128+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
129+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
130+
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
131+
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
132+
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
133+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);"><i class="van-icon van-icon-success van-cell__left-icon">
134+
<!----></i>
135+
<div class="van-cell__title"><span>A</span></div>
136+
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
137+
<!----></i></div>
138+
</div>
139+
<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-success van-cell__left-icon">
140+
<!----></i>
141+
<div class="van-cell__title"><span>B</span></div>
142+
</div>
143+
</div>
144+
</div>
145+
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
146+
<!---->
147+
</div>
148+
</div>
149+
`;
150+
126151
exports[`show dropdown item 1`] = `
127152
<div class="van-dropdown-menu van-hairline--top-bottom">
128153
<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>
129154
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
130155
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
131156
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
132157
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
133-
<div class="van-cell van-cell--clickable">
134-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
158+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
159+
<div class="van-cell__title"><span>A</span></div>
135160
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
136161
<!----></i></div>
137162
</div>
@@ -152,8 +177,8 @@ exports[`show dropdown item 2`] = `
152177
<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>
153178
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
154179
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
155-
<div class="van-cell van-cell--clickable">
156-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
180+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
181+
<div class="van-cell__title"><span>A</span></div>
157182
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
158183
<!----></i></div>
159184
</div>
@@ -165,8 +190,8 @@ exports[`show dropdown item 2`] = `
165190
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
166191
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
167192
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
168-
<div class="van-cell van-cell--clickable">
169-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
193+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
194+
<div class="van-cell__title"><span>A</span></div>
170195
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
171196
<!----></i></div>
172197
</div>
@@ -184,8 +209,8 @@ exports[`show dropdown item 3`] = `
184209
<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>
185210
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
186211
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
187-
<div class="van-cell van-cell--clickable">
188-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
212+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
213+
<div class="van-cell__title"><span>A</span></div>
189214
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
190215
<!----></i></div>
191216
</div>
@@ -197,8 +222,8 @@ exports[`show dropdown item 3`] = `
197222
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
198223
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
199224
<div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
200-
<div class="van-cell van-cell--clickable">
201-
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
225+
<div class="van-cell van-cell--clickable" style="color: rgb(25, 137, 250);">
226+
<div class="van-cell__title"><span>A</span></div>
202227
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
203228
<!----></i></div>
204229
</div>

‎src/dropdown-menu/test/index.spec.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ function renderWrapper(options = {}) {
2121
direction: options.direction || 'down',
2222
closeOnClickOutside: options.closeOnClickOutside,
2323
options: [
24-
{ text: 'A', value: 0 },
25-
{ text: 'B', value: 1 }
24+
{ text: 'A', value: 0, icon: options.icon },
25+
{ text: 'B', value: 1, icon: options.icon }
2626
]
2727
};
2828
}
@@ -46,6 +46,19 @@ test('show dropdown item', async () => {
4646
expect(wrapper).toMatchSnapshot();
4747
});
4848

49+
test('render option icon', async () => {
50+
const wrapper = renderWrapper({
51+
icon: 'success'
52+
});
53+
54+
await later();
55+
56+
const titles = wrapper.findAll('.van-dropdown-menu__title');
57+
58+
titles.at(0).trigger('click');
59+
expect(wrapper).toMatchSnapshot();
60+
});
61+
4962
test('close-on-click-outside', async () => {
5063
const wrapper = renderWrapper({
5164
closeOnClickOutside: true
@@ -79,7 +92,7 @@ test('direction up', async () => {
7992
direction: 'up'
8093
});
8194

82-
await later();
95+
await later(10);
8396

8497
const titles = wrapper.findAll('.van-dropdown-menu__title');
8598

0 commit comments

Comments
 (0)