blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-25 15:59:16 +08:00
Code Issues Projects Releases Wiki Activity

style(Picker): improve text size adjust (#6205)

Browse Source 
* style(Picker): improve text size adjust

* chore: remove text align center

* fix: snapsho
This commit is contained in:
neverland 2020-05-04 12:02:46 +08:00 committed by GitHub
parent 9215df7692
commit 8b328eabed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 2178 additions and 796 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,67 +8,171 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li> <div class="van-ellipsis">天津市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li> <div class="van-ellipsis">河北省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li> <div class="van-ellipsis">山西省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li> <div class="van-ellipsis">内蒙古自治区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li> <div class="van-ellipsis">辽宁省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li> <div class="van-ellipsis">吉林省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li> <div class="van-ellipsis">黑龙江省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li> <div class="van-ellipsis">上海市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li> <div class="van-ellipsis">江苏省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li> <div class="van-ellipsis">浙江省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li> <div class="van-ellipsis">安徽省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">福建省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">江西省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">山东省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">河南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖北省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">广东省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">广西壮族自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">重庆市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">四川省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">贵州省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">云南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西藏自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">陕西省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">甘肃省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">青海省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">宁夏回族自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">新疆维吾尔自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">台湾省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">香港特别行政区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">澳门特别行政区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海外</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">北京市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li> <div class="van-ellipsis">东城区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">朝阳区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">丰台区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">石景山区</li> <div class="van-ellipsis">西城区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海淀区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">门头沟区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">房山区</li> <div class="van-ellipsis">朝阳区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">通州区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">顺义区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">昌平区</li> <div class="van-ellipsis">丰台区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">大兴区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">怀柔区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">平谷区</li> <div class="van-ellipsis">石景山区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">密云区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">延庆区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海淀区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">门头沟区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">房山区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">通州区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">顺义区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">昌平区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">大兴区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">怀柔区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">平谷区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">密云区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">延庆区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -83,72 +187,186 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, -352px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li> <div class="van-ellipsis">天津市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li> <div class="van-ellipsis">河北省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江省</li> <div class="van-ellipsis">山西省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li> <div class="van-ellipsis">内蒙古自治区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li> <div class="van-ellipsis">辽宁省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li> <div class="van-ellipsis">吉林省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li> <div class="van-ellipsis">黑龙江省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li> <div class="van-ellipsis">上海市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li> <div class="van-ellipsis">江苏省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li> <div class="van-ellipsis">浙江省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li> <div class="van-ellipsis">安徽省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">福建省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">江西省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">山东省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">河南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖北省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">广东省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">广西壮族自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">重庆市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">四川省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">贵州省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">云南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西藏自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">陕西省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">甘肃省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">青海省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">宁夏回族自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">新疆维吾尔自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">台湾省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">香港特别行政区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">澳门特别行政区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海外</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波市</li> <div class="van-ellipsis">杭州市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州市</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州市</li> <div class="van-ellipsis">宁波市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">绍兴市</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">金华市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">衢州市</li> <div class="van-ellipsis">温州市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">舟山市</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台州市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">丽水市</li> <div class="van-ellipsis">嘉兴市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖州市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">绍兴市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">金华市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">衢州市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">舟山市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">台州市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">丽水市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">鹿城区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">龙湾区</li> <div class="van-ellipsis">鹿城区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">瓯海区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">洞头区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">永嘉县</li> <div class="van-ellipsis">龙湾区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">平阳县</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">苍南县</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">文成县</li> <div class="van-ellipsis">瓯海区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">泰顺县</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">瑞安市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">乐清市</li> <div class="van-ellipsis">洞头区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">永嘉县</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">平阳县</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">苍南县</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">文成县</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">泰顺县</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">瑞安市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">乐清市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -165,47 +383,119 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li> <div class="van-ellipsis">天津市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li> <div class="van-ellipsis">河北省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li> <div class="van-ellipsis">山西省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li> <div class="van-ellipsis">内蒙古自治区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li> <div class="van-ellipsis">辽宁省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li> <div class="van-ellipsis">吉林省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li> <div class="van-ellipsis">黑龙江省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li> <div class="van-ellipsis">上海市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li> <div class="van-ellipsis">江苏省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li> <div class="van-ellipsis">浙江省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li> <div class="van-ellipsis">安徽省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">福建省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">江西省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">山东省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">河南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖北省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">广东省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">广西壮族自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">重庆市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">四川省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">贵州省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">云南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西藏自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">陕西省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">甘肃省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">青海省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">宁夏回族自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">新疆维吾尔自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">台湾省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">香港特别行政区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">澳门特别行政区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海外</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">北京市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -222,50 +512,122 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">请选择</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li> <div class="van-ellipsis">请选择</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河北省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山西省</li> <div class="van-ellipsis">北京市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">内蒙古自治区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">辽宁省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">吉林省</li> <div class="van-ellipsis">天津市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">黑龙江省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上海市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江苏省</li> <div class="van-ellipsis">河北省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">浙江省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">安徽省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建省</li> <div class="van-ellipsis">山西省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">江西省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">山东省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河南省</li> <div class="van-ellipsis">内蒙古自治区</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖北省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖南省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广东省</li> <div class="van-ellipsis">辽宁省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">广西壮族自治区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海南省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">重庆市</li> <div class="van-ellipsis">吉林省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">四川省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">贵州省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">云南省</li> <div class="van-ellipsis">黑龙江省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西藏自治区</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">陕西省</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">甘肃省</li> <div class="van-ellipsis">上海市</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">青海省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁夏回族自治区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">新疆维吾尔自治区</li> <div class="van-ellipsis">江苏省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">台湾省</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">香港特别行政区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">澳门特别行政区</li> <div class="van-ellipsis">浙江省</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">海外</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">安徽省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">福建省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">江西省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">山东省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">河南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖北省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">广东省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">广西壮族自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">重庆市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">四川省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">贵州省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">云南省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西藏自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">陕西省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">甘肃省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">青海省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">宁夏回族自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">新疆维吾尔自治区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">台湾省</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">香港特别行政区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">澳门特别行政区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">海外</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div> <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>

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

@ -6,21 +6,33 @@ exports[`change option 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li> <div class="van-ellipsis">东城区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西城区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -36,21 +48,33 @@ exports[`change option 2`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li> <div class="van-ellipsis">天津市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">和平区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li> <div class="van-ellipsis">和平区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">河东区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -66,21 +90,33 @@ exports[`change option 3`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li> <div class="van-ellipsis">天津市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li> <div class="van-ellipsis">和平区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">河东区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -96,15 +132,23 @@ exports[`columns-num prop 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -119,13 +163,13 @@ exports[`columns-top、columns-bottom slot 1`] = `
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div> <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
<!---->Top<div class="van-picker__columns" style="height: 220px;"> <!---->Top<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div> <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
@ -140,20 +184,30 @@ exports[`reset method 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">县</li> <div class="van-ellipsis">天津市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">蓟县</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">蓟县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -169,21 +223,33 @@ exports[`reset method 2`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li> <div class="van-ellipsis">东城区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西城区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -199,13 +265,13 @@ exports[`title slot 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div> <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
@ -220,21 +286,33 @@ exports[`watch areaList & code 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li> <div class="van-ellipsis">东城区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西城区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -250,21 +328,33 @@ exports[`watch areaList & code 2`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li> <div class="van-ellipsis">东城区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西城区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -280,21 +370,33 @@ exports[`watch areaList & code 3`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">天津市</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li> <div class="van-ellipsis">北京市</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">县</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li> <div class="van-ellipsis">东城区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">西城区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>

232
src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
View File

@ -6,49 +6,101 @@ exports[`filter prop 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2020</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">2020</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li> <div class="van-ellipsis">05</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">10</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li> <div class="van-ellipsis">05</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li> <div class="van-ellipsis">10</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">15</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">25</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">30</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li> <div class="van-ellipsis">00</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li> <div class="van-ellipsis">05</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">10</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">15</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li> <div class="van-ellipsis">00</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li> <div class="van-ellipsis">05</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li> <div class="van-ellipsis">10</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li> <div class="van-ellipsis">15</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">25</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">30</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">35</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">40</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">45</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">50</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">55</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -64,50 +116,104 @@ exports[`formatter prop 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010 year</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020 year</li> <div class="van-ellipsis">2010 year</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">2020 year</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 month</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 month</li> <div class="van-ellipsis">05 month</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">10 month</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 day</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 day</li> <div class="van-ellipsis">05 day</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 day</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 day</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25 day</li> <div class="van-ellipsis">10 day</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 day</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">15 day</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20 day</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">25 day</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">30 day</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li> <div class="van-ellipsis">00 hour</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li> <div class="van-ellipsis">05 hour</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">10 hour</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">15 hour</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20 hour</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 minute</li> <div class="van-ellipsis">00 minute</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 minute</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li> <div class="van-ellipsis">05 minute</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25 minute</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">35 minute</li> <div class="van-ellipsis">10 minute</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">45 minute</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li> <div class="van-ellipsis">15 minute</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55 minute</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">25 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">30 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">35 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">40 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">45 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">50 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">55 minute</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>

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

@ -6,15 +6,23 @@ exports[`time type 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li> <div class="van-ellipsis">22</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">23</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li> <div class="van-ellipsis">58</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">59</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>

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

File diff suppressed because it is too large Load Diff

144
src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
View File

@ -6,22 +6,44 @@ exports[`filter prop 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li> <div class="van-ellipsis">00</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li> <div class="van-ellipsis">05</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">10</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">15</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li> <div class="van-ellipsis">00</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li> <div class="van-ellipsis">10</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">30</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">40</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">50</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -37,15 +59,23 @@ exports[`format initial value 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li> <div class="van-ellipsis">22</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">23</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li> <div class="van-ellipsis">58</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">59</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -61,22 +91,44 @@ exports[`formatter prop 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li> <div class="van-ellipsis">00 hour</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li> <div class="van-ellipsis">05 hour</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">10 hour</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">15 hour</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20 hour</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li> <div class="van-ellipsis">00 minute</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li> <div class="van-ellipsis">10 minute</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">20 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">30 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">40 minute</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">50 minute</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -92,17 +144,29 @@ exports[`max-hour & max-minute 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li> <div class="van-ellipsis">00</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">01</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">02</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li> <div class="van-ellipsis">00</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">01</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">02</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>

19
src/picker/PickerColumn.js
View File

@ -270,7 +270,6 @@ export default createComponent({
tabindex: disabled ? -1 : 0, tabindex: disabled ? -1 : 0,
}, },
class: [ class: [
'van-ellipsis',
bem('item', { bem('item', {
disabled, disabled,
selected: index === this.currentIndex, selected: index === this.currentIndex,
@ -283,13 +282,18 @@ export default createComponent({
}, },
}; };
if (this.allowHtml) { const childData = {
data.domProps = { class: 'van-ellipsis',
innerHTML: text, domProps: {
}; [this.allowHtml ? 'innerHTML' : 'innerText']: text,
} },
};
return <li {...data}>{this.allowHtml ? '' : text}</li>; return (
<li {...data}>
<div {...childData} />
</li>
);
}); });
}, },
}, },
@ -299,7 +303,6 @@ export default createComponent({
transform: `translate3d(0, ${this.offset + this.baseOffset}px, 0)`, transform: `translate3d(0, ${this.offset + this.baseOffset}px, 0)`,
transitionDuration: `${this.duration}ms`, transitionDuration: `${this.duration}ms`,
transitionProperty: this.duration ? 'all' : 'none', transitionProperty: this.duration ? 'all' : 'none',
lineHeight: `${this.itemHeight}px`,
}; };
return ( return (

7
src/picker/index.less
View File

@ -87,16 +87,17 @@
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
font-size: @picker-option-font-size; font-size: @picker-option-font-size;
text-align: center;
&__wrapper { &__wrapper {
transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1); transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1);
} }
&__item { &__item {
padding: 0 5px; display: flex;
align-items: center;
justify-content: center;
padding: 0 @padding-base;
color: @picker-option-text-color; color: @picker-option-text-color;
-webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
&--disabled { &--disabled {
opacity: @picker-option-disabled-opacity; opacity: @picker-option-disabled-opacity;

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

@ -7,12 +7,22 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li> <div class="van-ellipsis">杭州</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li> <div class="van-ellipsis">宁波</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">温州</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">嘉兴</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖州</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -26,12 +36,22 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li> <div class="van-ellipsis">杭州</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li> <div class="van-ellipsis">宁波</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">温州</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">嘉兴</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖州</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -48,12 +68,22 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li> <div class="van-ellipsis">杭州</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li> <div class="van-ellipsis">宁波</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">温州</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">嘉兴</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖州</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -70,19 +100,35 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周一</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周二</li> <div class="van-ellipsis">周一</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">周三</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周四</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">周五</li> <div class="van-ellipsis">周二</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">周三</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">周四</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">周五</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">上午</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">下午</li> <div class="van-ellipsis">上午</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">晚上</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">下午</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">晚上</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -99,21 +145,33 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li> <div class="van-ellipsis">浙江</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">福建</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">杭州</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li> <div class="van-ellipsis">杭州</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">温州</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">西湖区</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">余杭区</li> <div class="van-ellipsis">西湖区</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">余杭区</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -127,10 +185,16 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="-1" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">杭州</li> <li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">宁波</li> <div class="van-ellipsis">杭州</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">温州</li> </li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">宁波</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">温州</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -144,18 +208,32 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li> <div class="van-ellipsis">浙江</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">福建</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column column2"> <div class="van-picker-column column2">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li> <div class="van-ellipsis">杭州</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li> <div class="van-ellipsis">宁波</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">温州</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">嘉兴</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖州</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -169,18 +247,32 @@ exports[`renders demo correctly 1`] = `
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column column1"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">浙江</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">福建</li> <div class="van-ellipsis">浙江</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">福建</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker-column column2"> <div class="van-picker-column column2">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">杭州</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">宁波</li> <div class="van-ellipsis">杭州</div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">温州</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">嘉兴</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">湖州</li> <div class="van-ellipsis">宁波</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">温州</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">嘉兴</div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">湖州</div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>

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

@ -2,28 +2,56 @@
exports[`column watch default index 1`] = ` exports[`column watch default index 1`] = `
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 100px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="-1" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 50px;">1</li> <li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled van-picker-column__item--selected" style="height: 50px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li> <div class="van-ellipsis"></div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li> <div class="van-ellipsis"></div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
</ul> </ul>
</div> </div>
`; `;
exports[`column watch default index 2`] = ` exports[`column watch default index 2`] = `
<div class="van-picker-column"> <div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none; line-height: 50px;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="-1" class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li> <li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li> <div class="van-ellipsis"></div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li> <li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li> <div class="van-ellipsis"></div>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li> </li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 50px;">
<div class="van-ellipsis"></div>
</li>
</ul> </ul>
</div> </div>
`; `;
@ -33,7 +61,7 @@ exports[`columns-top、columns-bottom prop 1`] = `
<div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div> <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
<!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;"> <!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div> <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
@ -47,8 +75,10 @@ exports[`not allow html 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">&lt;div&gt;option&lt;/div&gt;</li> <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis"></div>
</li>
</ul> </ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@ -64,7 +94,7 @@ exports[`render title slot 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div> <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
@ -79,7 +109,7 @@ exports[`toolbar-position prop 1`] = `
<!----> <!---->
<div class="van-picker__columns" style="height: 220px;"> <div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column"> <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;"></ul> <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div> </div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div> <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div> <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>