Skip to content

Commit cedf590

Browse files
chenjiahanchenjiahan
authored
[improvement] DropdownMenu: title ellipsis (youzan#3847)
1 parent f50dc30 commit cedf590

4 files changed

Lines changed: 34 additions & 30 deletions

File tree

‎src/dropdown-menu/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default createComponent({
9595
]}
9696
style={{ color: item.showPopup ? this.activeColor : '' }}
9797
>
98-
{item.displayTitle}
98+
<div class="van-ellipsis">{item.displayTitle}</div>
9999
</span>
100100
</div>
101101
));

‎src/dropdown-menu/index.less‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
flex: 1;
1212
align-items: center;
1313
justify-content: center;
14+
min-width: 0; // hack for flex ellipsis
1415

1516
&:active {
1617
opacity: .7;
@@ -29,12 +30,15 @@
2930

3031
&__title {
3132
position: relative;
33+
box-sizing: border-box;
34+
max-width: 100%;
35+
padding: 0 8px;
3236
font-size: @dropdown-menu-title-font-size;
3337

3438
&::after {
3539
position: absolute;
3640
top: 3px;
37-
right: -12px;
41+
right: -4px;
3842
border: 3px solid;
3943
border-color: transparent transparent currentColor currentColor;
4044
transform: rotate(-45deg);

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ exports[`renders demo correctly 1`] = `
44
<div>
55
<div>
66
<div class="van-dropdown-menu van-hairline--top-bottom">
7-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
8-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
7+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
8+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
99
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
1010
<!---->
1111
</div>
@@ -16,8 +16,8 @@ exports[`renders demo correctly 1`] = `
1616
</div>
1717
<div>
1818
<div class="van-dropdown-menu van-hairline--top-bottom">
19-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
20-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
19+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
20+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
2121
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
2222
<!---->
2323
</div>
@@ -28,8 +28,8 @@ exports[`renders demo correctly 1`] = `
2828
</div>
2929
<div>
3030
<div class="van-dropdown-menu van-hairline--top-bottom">
31-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">全部商品</span></div>
32-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">默认排序</span></div>
31+
<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>
32+
<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>
3333
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
3434
<!---->
3535
</div>
@@ -40,8 +40,8 @@ exports[`renders demo correctly 1`] = `
4040
</div>
4141
<div>
4242
<div class="van-dropdown-menu van-hairline--top-bottom">
43-
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">全部商品</span></div>
44-
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
43+
<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>
44+
<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>
4545
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
4646
<!---->
4747
</div>

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
exports[`click option 1`] = `
44
<div class="van-dropdown-menu van-hairline--top-bottom">
5-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
6-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
5+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
6+
<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;">
88
<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;">
99
<div class="van-cell van-cell--clickable">
@@ -24,8 +24,8 @@ exports[`click option 1`] = `
2424

2525
exports[`close-on-click-outside 1`] = `
2626
<div class="van-dropdown-menu van-hairline--top-bottom">
27-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
28-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
27+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
28+
<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;">
3030
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; 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;">
@@ -47,7 +47,7 @@ exports[`close-on-click-outside 1`] = `
4747

4848
exports[`destroy one item 1`] = `
4949
<div class="van-dropdown-menu van-hairline--top-bottom">
50-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
50+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
5151
<!---->
5252
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
5353
<!---->
@@ -57,8 +57,8 @@ exports[`destroy one item 1`] = `
5757

5858
exports[`didn\`t find matched option 1`] = `
5959
<div class="van-dropdown-menu van-hairline--top-bottom">
60-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
61-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
60+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
61+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
6262
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
6363
<!---->
6464
</div>
@@ -70,8 +70,8 @@ exports[`didn\`t find matched option 1`] = `
7070

7171
exports[`direction up 1`] = `
7272
<div class="van-dropdown-menu van-hairline--top-bottom">
73-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
74-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
73+
<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>
74+
<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;">
7676
<div class="van-overlay van-fade-enter-active" style="z-index: 2008; 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;">
@@ -93,8 +93,8 @@ exports[`direction up 1`] = `
9393

9494
exports[`disable close-on-click-outside 1`] = `
9595
<div class="van-dropdown-menu van-hairline--top-bottom">
96-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
97-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
96+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
97+
<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;">
9999
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; 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;">
@@ -116,7 +116,7 @@ exports[`disable close-on-click-outside 1`] = `
116116

117117
exports[`disable dropdown item 1`] = `
118118
<div class="van-dropdown-menu van-hairline--top-bottom">
119-
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>
119+
<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>
120120
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
121121
<!---->
122122
</div>
@@ -125,8 +125,8 @@ exports[`disable dropdown item 1`] = `
125125

126126
exports[`show dropdown item 1`] = `
127127
<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 van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
129-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
128+
<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>
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>
130130
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
131131
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
132132
<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;">
@@ -148,8 +148,8 @@ exports[`show dropdown item 1`] = `
148148

149149
exports[`show dropdown item 2`] = `
150150
<div class="van-dropdown-menu van-hairline--top-bottom">
151-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
152-
<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);">A</span></div>
151+
<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>
152+
<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>
153153
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
154154
<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;">
155155
<div class="van-cell van-cell--clickable">
@@ -180,8 +180,8 @@ exports[`show dropdown item 2`] = `
180180

181181
exports[`show dropdown item 3`] = `
182182
<div class="van-dropdown-menu van-hairline--top-bottom">
183-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
184-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
183+
<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>
184+
<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>
185185
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
186186
<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;">
187187
<div class="van-cell van-cell--clickable">
@@ -212,8 +212,8 @@ exports[`show dropdown item 3`] = `
212212

213213
exports[`title prop 1`] = `
214214
<div class="van-dropdown-menu van-hairline--top-bottom">
215-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
216-
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
215+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
216+
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
217217
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
218218
<!---->
219219
</div>

0 commit comments

Comments
 (0)