blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Picker: add class for selected item (#3830)

Browse Source
This commit is contained in:
neverland 2019-07-11 19:35:06 +08:00 committed by GitHub
parent 907c9a3d03
commit 35ccebeea2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 65 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/area/test/__snapshots__/demo.spec.js.snap
View File

@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
@ -51,12 +51,12 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">丰台区</li>
@ -100,7 +100,7 @@ exports[`renders demo correctly 1`] = `
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江省</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li>
@ -131,7 +131,7 @@ exports[`renders demo correctly 1`] = `
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">绍兴市</li>
@ -144,7 +144,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">鹿城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">鹿城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">龙湾区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">洞头区</li>
@ -174,7 +174,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li>
@ -213,7 +213,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>

52
src/area/test/__snapshots__/index.spec.js.snap
View File

@ -10,19 +10,19 @@ exports[`change option 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul>
</div>
@ -44,18 +44,18 @@ exports[`change option 2`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">和平区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
</ul>
</div>
@ -77,19 +77,19 @@ exports[`change option 3`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -109,13 +109,13 @@ exports[`columns-num prop 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
@ -137,18 +137,18 @@ exports[`reset method 1`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">蓟县</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">蓟县</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -168,19 +168,19 @@ exports[`reset method 2`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul>
</div>
@ -201,19 +201,19 @@ exports[`watch areaList & code 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul>
</div>
@ -234,19 +234,19 @@ exports[`watch areaList & code 2`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul>
</div>
@ -267,19 +267,19 @@ exports[`watch areaList & code 3`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul>
</div>

28
src/datetime-picker/test/__snapshots__/demo.spec.js.snap
View File

@ -12,13 +12,13 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
@ -34,7 +34,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
@ -69,7 +69,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
@ -97,7 +97,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
@ -175,7 +175,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
@ -191,7 +191,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
@ -207,7 +207,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
@ -256,7 +256,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2018年</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
@ -272,7 +272,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01月</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</li>
@ -304,7 +304,7 @@ exports[`renders demo correctly 1`] = `
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
@ -317,7 +317,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
@ -407,7 +407,7 @@ exports[`renders demo correctly 1`] = `
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
@ -423,7 +423,7 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>

16
src/picker/PickerColumn.js
View File

@ -118,8 +118,7 @@ export default createComponent({
const distance = this.offset - this.momentumOffset;
const duration = Date.now() - this.touchStartTime;
const allowMomentum =
duration < MOMENTUM_LIMIT_TIME &&
Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
duration < MOMENTUM_LIMIT_TIME && Math.abs(distance) > MOMENTUM_LIMIT_DISTANCE;
if (allowMomentum) {
this.momentum(distance, duration);
@ -195,17 +194,13 @@ export default createComponent({
},
getIndexByOffset(offset) {
return range(
Math.round(-offset / this.itemHeight),
0,
this.count - 1
);
return range(Math.round(-offset / this.itemHeight), 0, this.count - 1);
},
momentum(distance, duration) {
const speed = Math.abs(distance / duration);
distance = this.offset + speed / 0.002 * (distance < 0 ? -1 : 1);
distance = this.offset + (speed / 0.002) * (distance < 0 ? -1 : 1);
const index = this.getIndexByOffset(distance);
@ -259,7 +254,10 @@ export default createComponent({
style={optionStyle}
class={[
'van-ellipsis',
bem('item', { disabled: isOptionDisabled(option) })
bem('item', {
disabled: isOptionDisabled(option),
selected: index === this.currentIndex
})
]}
domPropsInnerHTML={this.getOptionText(option)}
onClick={() => {

16
src/picker/test/__snapshots__/demo.spec.js.snap
View File

@ -8,7 +8,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
@ -51,7 +51,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
@ -80,7 +80,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
</ul>
</div>
@ -96,7 +96,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
</ul>
</div>
@ -104,7 +104,7 @@ exports[`renders demo correctly 1`] = `
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>
@ -121,7 +121,7 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li>
</ul>
</div>
@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li>
</ul>

4
src/picker/test/__snapshots__/index.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`column watch default index 1`] = `
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 100px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
@ -19,7 +19,7 @@ exports[`column watch default index 2`] = `
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>