alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(Picker): improve accessibility (#4521)

Browse Source
This commit is contained in:
neverland
2019-09-21 07:26:58 +08:00
committed by GitHub
parent 3c210f8252
commit a1ac34bead
11 changed files with 690 additions and 760 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
+56 -62
View File
@@ -2,57 +2,54 @@
exports[`filter prop 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">10</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">10</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-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</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-ellipsis van-picker-column__item" style="height: 44px;">20</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</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-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</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-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</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-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -64,57 +61,54 @@ exports[`filter prop 1`] = `
exports[`formatter prop 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2010 year</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020 year</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">2020 year</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 month</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 month</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">10 month</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">05 day</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 day</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 day</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 day</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25 day</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 day</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">10 day</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">15 day</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-ellipsis van-picker-column__item" style="height: 44px;">25 day</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">30 day</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</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-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55 minute</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">05 minute</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</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-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25 minute</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-ellipsis van-picker-column__item" style="height: 44px;">35 minute</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</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-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55 minute</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap
+5 -8
View File
@@ -2,22 +2,19 @@
exports[`time type 1`] = `
<div class="van-picker van-datetime-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">23</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">59</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
src/datetime-picker/test/__snapshots__/demo.spec.js.snap
+320 -335
View File
@@ -4,159 +4,156 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-picker van-datetime-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</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-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</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-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</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-ellipsis van-picker-column__item" style="height: 44px;">31</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</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-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</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-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</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-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</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-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</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-ellipsis van-picker-column__item" style="height: 44px;">31</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">44</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-ellipsis van-picker-column__item" style="height: 44px;">46</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -167,77 +164,74 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-picker van-datetime-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2021</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2022</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2023</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2024</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2025</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2026</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2027</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2028</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2029</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</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-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</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-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</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-ellipsis van-picker-column__item" style="height: 44px;">31</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -248,42 +242,39 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-picker van-datetime-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2022年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2023年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2024年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2025年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2026年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2027年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2028年</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">2029年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">2018年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2019年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2020年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2021年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2022年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2023年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2024年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2025年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2026年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2027年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2028年</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">2029年</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11月</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">01月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11月</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">12月</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -294,89 +285,86 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-picker van-datetime-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<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;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</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-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">29</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">31</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">44</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">46</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</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-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</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-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">24</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">26</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">27</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">28</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">29</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-ellipsis van-picker-column__item" style="height: 44px;">31</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">32</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">33</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">34</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">36</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">37</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">38</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">39</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">41</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">42</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">43</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">44</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-ellipsis van-picker-column__item" style="height: 44px;">46</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">47</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">48</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">49</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">51</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">52</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">53</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">54</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">56</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">57</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">58</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -387,54 +375,51 @@ exports[`renders demo correctly 1`] = `
</div>
<div>
<div class="van-picker van-datetime-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, -440px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">14</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">19</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">00</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">03</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">04</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">06</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">07</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">08</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">09</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">11</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">12</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">13</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">14</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-ellipsis van-picker-column__item" style="height: 44px;">16</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">17</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">18</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">19</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-ellipsis van-picker-column__item" style="height: 44px;">21</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">22</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">25</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">45</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</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-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">25</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-ellipsis van-picker-column__item" style="height: 44px;">35</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</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-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">55</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
+36 -48
View File
@@ -2,29 +2,26 @@
exports[`filter prop 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">05</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10</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-ellipsis van-picker-column__item" style="height: 44px;">20</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">10</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-ellipsis van-picker-column__item" style="height: 44px;">30</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">40</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -36,22 +33,19 @@ exports[`filter prop 1`] = `
exports[`format initial value 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">22</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">23</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">23</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">58</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">59</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">59</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -63,29 +57,26 @@ exports[`format initial value 1`] = `
exports[`formatter prop 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 hour</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">15 hour</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">05 hour</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">10 hour</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-ellipsis van-picker-column__item" style="height: 44px;">20 hour</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">30 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
<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-ellipsis van-picker-column__item" style="height: 44px;">10 minute</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">20 minute</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-ellipsis van-picker-column__item" style="height: 44px;">40 minute</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">50 minute</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -97,24 +88,21 @@ exports[`formatter prop 1`] = `
exports[`max-hour & max-minute 1`] = `
<div class="van-picker">
<div class="van-hairline--top-bottom van-picker__toolbar">
<div role="button" tabindex="0" class="van-picker__cancel">取消</div>
<div role="button" tabindex="0" class="van-picker__confirm">确认</div>
</div>
<div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li 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-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none; line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
<li 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-ellipsis van-picker-column__item" style="height: 44px;">01</li>
<li role="button" tabindex="0" class="van-ellipsis van-picker-column__item" style="height: 44px;">02</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>