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

[bugfix] Picker：incorrect option height in some android devices (#1449)

Browse Source 
[bugfix] Picker：incorrect option height in some android devices
This commit is contained in:
SnowZhangXl 2018-07-10 09:52:16 +08:00 committed by neverland
parent 8c7dc1e622
commit 75d0aecd1e
5 changed files with 349 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/area/test/__snapshots__/index.spec.js.snap
View File

@ -34,20 +34,20 @@ exports[`change option 2`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
<li class="van-ellipsis van-picker-column__item">县</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">和平区</li>
<li class="van-ellipsis van-picker-column__item">河东区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">和平区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">河东区</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
@ -66,20 +66,20 @@ exports[`change option 3`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">天津市</li>
<li class="van-ellipsis van-picker-column__item">县</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">天津市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item">和平区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">河东区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">和平区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">河东区</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
@ -207,20 +207,20 @@ exports[`watch areaList & code 3`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
<li class="van-ellipsis van-picker-column__item">天津市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
<li class="van-ellipsis van-picker-column__item">县</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
<li class="van-ellipsis van-picker-column__item">西城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
@ -239,20 +239,20 @@ exports[`watch areaList & code 4`] = `
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
<li class="van-ellipsis van-picker-column__item">天津市</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">天津市</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">北京市</li>
<li class="van-ellipsis van-picker-column__item">县</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">北京市</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">县</li>
</ul>
</div>
<div class="van-picker-column" style="height: 220px;">
<ul style="line-height: 44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">东城区</li>
<li class="van-ellipsis van-picker-column__item">西城区</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 44px;">东城区</li>
<li class="van-ellipsis van-picker-column__item" style="height: 44px;">西城区</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>

554
packages/datetime-picker/test/__snapshots__/demo.spec.js.snap
View File

@ -13,151 +13,151 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">2018</li>
<li class="van-ellipsis van-picker-column__item">2019</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">2018</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2019</li>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">01</li>
<li class="van-ellipsis van-picker-column__item">02</li>
<li class="van-ellipsis van-picker-column__item">03</li>
<li class="van-ellipsis van-picker-column__item">04</li>
<li class="van-ellipsis van-picker-column__item">05</li>
<li class="van-ellipsis van-picker-column__item">06</li>
<li class="van-ellipsis van-picker-column__item">07</li>
<li class="van-ellipsis van-picker-column__item">08</li>
<li class="van-ellipsis van-picker-column__item">09</li>
<li class="van-ellipsis van-picker-column__item">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">04</li>
<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>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">01</li>
<li class="van-ellipsis van-picker-column__item">02</li>
<li class="van-ellipsis van-picker-column__item">03</li>
<li class="van-ellipsis van-picker-column__item">04</li>
<li class="van-ellipsis van-picker-column__item">05</li>
<li class="van-ellipsis van-picker-column__item">06</li>
<li class="van-ellipsis van-picker-column__item">07</li>
<li class="van-ellipsis van-picker-column__item">08</li>
<li class="van-ellipsis van-picker-column__item">09</li>
<li class="van-ellipsis van-picker-column__item">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item">13</li>
<li class="van-ellipsis van-picker-column__item">14</li>
<li class="van-ellipsis van-picker-column__item">15</li>
<li class="van-ellipsis van-picker-column__item">16</li>
<li class="van-ellipsis van-picker-column__item">17</li>
<li class="van-ellipsis van-picker-column__item">18</li>
<li class="van-ellipsis van-picker-column__item">19</li>
<li class="van-ellipsis van-picker-column__item">20</li>
<li class="van-ellipsis van-picker-column__item">21</li>
<li class="van-ellipsis van-picker-column__item">22</li>
<li class="van-ellipsis van-picker-column__item">23</li>
<li class="van-ellipsis van-picker-column__item">24</li>
<li class="van-ellipsis van-picker-column__item">25</li>
<li class="van-ellipsis van-picker-column__item">26</li>
<li class="van-ellipsis van-picker-column__item">27</li>
<li class="van-ellipsis van-picker-column__item">28</li>
<li class="van-ellipsis van-picker-column__item">29</li>
<li class="van-ellipsis van-picker-column__item">30</li>
<li class="van-ellipsis van-picker-column__item">31</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">04</li>
<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>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">00</li>
<li class="van-ellipsis van-picker-column__item">01</li>
<li class="van-ellipsis van-picker-column__item">02</li>
<li class="van-ellipsis van-picker-column__item">03</li>
<li class="van-ellipsis van-picker-column__item">04</li>
<li class="van-ellipsis van-picker-column__item">05</li>
<li class="van-ellipsis van-picker-column__item">06</li>
<li class="van-ellipsis van-picker-column__item">07</li>
<li class="van-ellipsis van-picker-column__item">08</li>
<li class="van-ellipsis van-picker-column__item">09</li>
<li class="van-ellipsis van-picker-column__item">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item">13</li>
<li class="van-ellipsis van-picker-column__item">14</li>
<li class="van-ellipsis van-picker-column__item">15</li>
<li class="van-ellipsis van-picker-column__item">16</li>
<li class="van-ellipsis van-picker-column__item">17</li>
<li class="van-ellipsis van-picker-column__item">18</li>
<li class="van-ellipsis van-picker-column__item">19</li>
<li class="van-ellipsis van-picker-column__item">20</li>
<li class="van-ellipsis van-picker-column__item">21</li>
<li class="van-ellipsis van-picker-column__item">22</li>
<li class="van-ellipsis van-picker-column__item">23</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">03</li>
<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>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">00</li>
<li class="van-ellipsis van-picker-column__item">01</li>
<li class="van-ellipsis van-picker-column__item">02</li>
<li class="van-ellipsis van-picker-column__item">03</li>
<li class="van-ellipsis van-picker-column__item">04</li>
<li class="van-ellipsis van-picker-column__item">05</li>
<li class="van-ellipsis van-picker-column__item">06</li>
<li class="van-ellipsis van-picker-column__item">07</li>
<li class="van-ellipsis van-picker-column__item">08</li>
<li class="van-ellipsis van-picker-column__item">09</li>
<li class="van-ellipsis van-picker-column__item">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item">13</li>
<li class="van-ellipsis van-picker-column__item">14</li>
<li class="van-ellipsis van-picker-column__item">15</li>
<li class="van-ellipsis van-picker-column__item">16</li>
<li class="van-ellipsis van-picker-column__item">17</li>
<li class="van-ellipsis van-picker-column__item">18</li>
<li class="van-ellipsis van-picker-column__item">19</li>
<li class="van-ellipsis van-picker-column__item">20</li>
<li class="van-ellipsis van-picker-column__item">21</li>
<li class="van-ellipsis van-picker-column__item">22</li>
<li class="van-ellipsis van-picker-column__item">23</li>
<li class="van-ellipsis van-picker-column__item">24</li>
<li class="van-ellipsis van-picker-column__item">25</li>
<li class="van-ellipsis van-picker-column__item">26</li>
<li class="van-ellipsis van-picker-column__item">27</li>
<li class="van-ellipsis van-picker-column__item">28</li>
<li class="van-ellipsis van-picker-column__item">29</li>
<li class="van-ellipsis van-picker-column__item">30</li>
<li class="van-ellipsis van-picker-column__item">31</li>
<li class="van-ellipsis van-picker-column__item">32</li>
<li class="van-ellipsis van-picker-column__item">33</li>
<li class="van-ellipsis van-picker-column__item">34</li>
<li class="van-ellipsis van-picker-column__item">35</li>
<li class="van-ellipsis van-picker-column__item">36</li>
<li class="van-ellipsis van-picker-column__item">37</li>
<li class="van-ellipsis van-picker-column__item">38</li>
<li class="van-ellipsis van-picker-column__item">39</li>
<li class="van-ellipsis van-picker-column__item">40</li>
<li class="van-ellipsis van-picker-column__item">41</li>
<li class="van-ellipsis van-picker-column__item">42</li>
<li class="van-ellipsis van-picker-column__item">43</li>
<li class="van-ellipsis van-picker-column__item">44</li>
<li class="van-ellipsis van-picker-column__item">45</li>
<li class="van-ellipsis van-picker-column__item">46</li>
<li class="van-ellipsis van-picker-column__item">47</li>
<li class="van-ellipsis van-picker-column__item">48</li>
<li class="van-ellipsis van-picker-column__item">49</li>
<li class="van-ellipsis van-picker-column__item">50</li>
<li class="van-ellipsis van-picker-column__item">51</li>
<li class="van-ellipsis van-picker-column__item">52</li>
<li class="van-ellipsis van-picker-column__item">53</li>
<li class="van-ellipsis van-picker-column__item">54</li>
<li class="van-ellipsis van-picker-column__item">55</li>
<li class="van-ellipsis van-picker-column__item">56</li>
<li class="van-ellipsis van-picker-column__item">57</li>
<li class="van-ellipsis van-picker-column__item">58</li>
<li class="van-ellipsis van-picker-column__item">59</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">03</li>
<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>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@ -175,68 +175,68 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">2018</li>
<li class="van-ellipsis van-picker-column__item">2019</li>
<li class="van-ellipsis van-picker-column__item">2020</li>
<li class="van-ellipsis van-picker-column__item">2021</li>
<li class="van-ellipsis van-picker-column__item">2022</li>
<li class="van-ellipsis van-picker-column__item">2023</li>
<li class="van-ellipsis van-picker-column__item">2024</li>
<li class="van-ellipsis van-picker-column__item">2025</li>
<li class="van-ellipsis van-picker-column__item">2026</li>
<li class="van-ellipsis van-picker-column__item">2027</li>
<li class="van-ellipsis van-picker-column__item">2028</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">2018</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2019</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2020</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2021</li>
<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>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">01</li>
<li class="van-ellipsis van-picker-column__item">02</li>
<li class="van-ellipsis van-picker-column__item">03</li>
<li class="van-ellipsis van-picker-column__item">04</li>
<li class="van-ellipsis van-picker-column__item">05</li>
<li class="van-ellipsis van-picker-column__item">06</li>
<li class="van-ellipsis van-picker-column__item">07</li>
<li class="van-ellipsis van-picker-column__item">08</li>
<li class="van-ellipsis van-picker-column__item">09</li>
<li class="van-ellipsis van-picker-column__item">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">04</li>
<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>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">01</li>
<li class="van-ellipsis van-picker-column__item">02</li>
<li class="van-ellipsis van-picker-column__item">03</li>
<li class="van-ellipsis van-picker-column__item">04</li>
<li class="van-ellipsis van-picker-column__item">05</li>
<li class="van-ellipsis van-picker-column__item">06</li>
<li class="van-ellipsis van-picker-column__item">07</li>
<li class="van-ellipsis van-picker-column__item">08</li>
<li class="van-ellipsis van-picker-column__item">09</li>
<li class="van-ellipsis van-picker-column__item">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item">13</li>
<li class="van-ellipsis van-picker-column__item">14</li>
<li class="van-ellipsis van-picker-column__item">15</li>
<li class="van-ellipsis van-picker-column__item">16</li>
<li class="van-ellipsis van-picker-column__item">17</li>
<li class="van-ellipsis van-picker-column__item">18</li>
<li class="van-ellipsis van-picker-column__item">19</li>
<li class="van-ellipsis van-picker-column__item">20</li>
<li class="van-ellipsis van-picker-column__item">21</li>
<li class="van-ellipsis van-picker-column__item">22</li>
<li class="van-ellipsis van-picker-column__item">23</li>
<li class="van-ellipsis van-picker-column__item">24</li>
<li class="van-ellipsis van-picker-column__item">25</li>
<li class="van-ellipsis van-picker-column__item">26</li>
<li class="van-ellipsis van-picker-column__item">27</li>
<li class="van-ellipsis van-picker-column__item">28</li>
<li class="van-ellipsis van-picker-column__item">29</li>
<li class="van-ellipsis van-picker-column__item">30</li>
<li class="van-ellipsis van-picker-column__item">31</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">04</li>
<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>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@ -254,33 +254,33 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">2018</li>
<li class="van-ellipsis van-picker-column__item">2019</li>
<li class="van-ellipsis van-picker-column__item">2020</li>
<li class="van-ellipsis van-picker-column__item">2021</li>
<li class="van-ellipsis van-picker-column__item">2022</li>
<li class="van-ellipsis van-picker-column__item">2023</li>
<li class="van-ellipsis van-picker-column__item">2024</li>
<li class="van-ellipsis van-picker-column__item">2025</li>
<li class="van-ellipsis van-picker-column__item">2026</li>
<li class="van-ellipsis van-picker-column__item">2027</li>
<li class="van-ellipsis van-picker-column__item">2028</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">2018</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2019</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2020</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">2021</li>
<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>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">01</li>
<li class="van-ellipsis van-picker-column__item">02</li>
<li class="van-ellipsis van-picker-column__item">03</li>
<li class="van-ellipsis van-picker-column__item">04</li>
<li class="van-ellipsis van-picker-column__item">05</li>
<li class="van-ellipsis van-picker-column__item">06</li>
<li class="van-ellipsis van-picker-column__item">07</li>
<li class="van-ellipsis van-picker-column__item">08</li>
<li class="van-ellipsis van-picker-column__item">09</li>
<li class="van-ellipsis van-picker-column__item">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">03</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">04</li>
<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>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@ -298,81 +298,81 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item">13</li>
<li class="van-ellipsis van-picker-column__item">14</li>
<li class="van-ellipsis van-picker-column__item">15</li>
<li class="van-ellipsis van-picker-column__item">16</li>
<li class="van-ellipsis van-picker-column__item">17</li>
<li class="van-ellipsis van-picker-column__item">18</li>
<li class="van-ellipsis van-picker-column__item">19</li>
<li class="van-ellipsis van-picker-column__item">20</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" 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>
</ul>
</div>
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">00</li>
<li class="van-ellipsis van-picker-column__item">01</li>
<li class="van-ellipsis van-picker-column__item">02</li>
<li class="van-ellipsis van-picker-column__item">03</li>
<li class="van-ellipsis van-picker-column__item">04</li>
<li class="van-ellipsis van-picker-column__item">05</li>
<li class="van-ellipsis van-picker-column__item">06</li>
<li class="van-ellipsis van-picker-column__item">07</li>
<li class="van-ellipsis van-picker-column__item">08</li>
<li class="van-ellipsis van-picker-column__item">09</li>
<li class="van-ellipsis van-picker-column__item">10</li>
<li class="van-ellipsis van-picker-column__item">11</li>
<li class="van-ellipsis van-picker-column__item">12</li>
<li class="van-ellipsis van-picker-column__item">13</li>
<li class="van-ellipsis van-picker-column__item">14</li>
<li class="van-ellipsis van-picker-column__item">15</li>
<li class="van-ellipsis van-picker-column__item">16</li>
<li class="van-ellipsis van-picker-column__item">17</li>
<li class="van-ellipsis van-picker-column__item">18</li>
<li class="van-ellipsis van-picker-column__item">19</li>
<li class="van-ellipsis van-picker-column__item">20</li>
<li class="van-ellipsis van-picker-column__item">21</li>
<li class="van-ellipsis van-picker-column__item">22</li>
<li class="van-ellipsis van-picker-column__item">23</li>
<li class="van-ellipsis van-picker-column__item">24</li>
<li class="van-ellipsis van-picker-column__item">25</li>
<li class="van-ellipsis van-picker-column__item">26</li>
<li class="van-ellipsis van-picker-column__item">27</li>
<li class="van-ellipsis van-picker-column__item">28</li>
<li class="van-ellipsis van-picker-column__item">29</li>
<li class="van-ellipsis van-picker-column__item">30</li>
<li class="van-ellipsis van-picker-column__item">31</li>
<li class="van-ellipsis van-picker-column__item">32</li>
<li class="van-ellipsis van-picker-column__item">33</li>
<li class="van-ellipsis van-picker-column__item">34</li>
<li class="van-ellipsis van-picker-column__item">35</li>
<li class="van-ellipsis van-picker-column__item">36</li>
<li class="van-ellipsis van-picker-column__item">37</li>
<li class="van-ellipsis van-picker-column__item">38</li>
<li class="van-ellipsis van-picker-column__item">39</li>
<li class="van-ellipsis van-picker-column__item">40</li>
<li class="van-ellipsis van-picker-column__item">41</li>
<li class="van-ellipsis van-picker-column__item">42</li>
<li class="van-ellipsis van-picker-column__item">43</li>
<li class="van-ellipsis van-picker-column__item">44</li>
<li class="van-ellipsis van-picker-column__item">45</li>
<li class="van-ellipsis van-picker-column__item">46</li>
<li class="van-ellipsis van-picker-column__item">47</li>
<li class="van-ellipsis van-picker-column__item">48</li>
<li class="van-ellipsis van-picker-column__item">49</li>
<li class="van-ellipsis van-picker-column__item">50</li>
<li class="van-ellipsis van-picker-column__item">51</li>
<li class="van-ellipsis van-picker-column__item">52</li>
<li class="van-ellipsis van-picker-column__item">53</li>
<li class="van-ellipsis van-picker-column__item">54</li>
<li class="van-ellipsis van-picker-column__item">55</li>
<li class="van-ellipsis van-picker-column__item">56</li>
<li class="van-ellipsis van-picker-column__item">57</li>
<li class="van-ellipsis van-picker-column__item">58</li>
<li class="van-ellipsis van-picker-column__item">59</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">00</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">01</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">02</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">03</li>
<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>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>

7
packages/picker/PickerColumn.vue
View File

@ -11,6 +11,7 @@
<ul :style="wrapperStyle">
<li
v-for="(option, index) in options"
:key="index"
v-html="getOptionText(option)"
class="van-ellipsis"
:class="b('item', {
@ -18,6 +19,7 @@
selected: index === currentIndex
})"
@click="setIndex(index, true)"
:style="itemStyle"
/>
</ul>
</div>
@ -96,6 +98,11 @@ export default create({
transform: `translate3d(0, ${this.offset + this.baseOffset}px, 0)`,
lineHeight: this.itemHeight + 'px'
};
},
itemStyle() {
return {
height: this.itemHeight + 'px'
};
}
},

54
packages/picker/test/__snapshots__/demo.spec.js.snap
View File

@ -9,11 +9,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item">温州</li>
<li class="van-ellipsis van-picker-column__item">嘉兴</li>
<li class="van-ellipsis van-picker-column__item">湖州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@ -27,9 +27,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 44px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">宁波</li>
<li class="van-ellipsis van-picker-column__item">温州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@ -47,11 +47,11 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item">温州</li>
<li class="van-ellipsis van-picker-column__item">嘉兴</li>
<li class="van-ellipsis van-picker-column__item">湖州</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@ -65,17 +65,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column column1" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">浙江</li>
<li class="van-ellipsis van-picker-column__item">福建</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">福建</li>
</ul>
</div>
<div class="van-picker-column column2" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">温州</li>
<li class="van-ellipsis van-picker-column__item">嘉兴</li>
<li class="van-ellipsis van-picker-column__item">湖州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>
@ -91,17 +91,17 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker__columns" style="height:220px;">
<div class="van-picker-column column1" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 88px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">浙江</li>
<li class="van-ellipsis van-picker-column__item">福建</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">浙江</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">福建</li>
</ul>
</div>
<div class="van-picker-column column2" style="height:220px;">
<ul style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item">杭州</li>
<li class="van-ellipsis van-picker-column__item">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">温州</li>
<li class="van-ellipsis van-picker-column__item">嘉兴</li>
<li class="van-ellipsis van-picker-column__item">湖州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">嘉兴</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">湖州</li>
</ul>
</div>
<div class="van-hairline--top-bottom van-picker__frame" style="height:44px;"></div>

28
packages/picker/test/__snapshots__/index.spec.js.snap
View File

@ -3,13 +3,13 @@
exports[`column watch default index 1`] = `
<div class="van-picker-column">
<ul style="line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1990</li>
<li class="van-ellipsis van-picker-column__item">1991</li>
<li class="van-ellipsis van-picker-column__item">1992</li>
<li class="van-ellipsis van-picker-column__item">1993</li>
<li class="van-ellipsis van-picker-column__item">1994</li>
<li class="van-ellipsis van-picker-column__item">1995</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul>
</div>
`;
@ -17,13 +17,13 @@ exports[`column watch default index 1`] = `
exports[`column watch default index 2`] = `
<div class="van-picker-column">
<ul style="line-height: 50px;">
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled">1</li>
<li class="van-ellipsis van-picker-column__item">1990</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected">1991</li>
<li class="van-ellipsis van-picker-column__item">1992</li>
<li class="van-ellipsis van-picker-column__item">1993</li>
<li class="van-ellipsis van-picker-column__item">1994</li>
<li class="van-ellipsis van-picker-column__item">1995</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--disabled" style="height: 50px;">1</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1990</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height: 50px;">1991</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1992</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1993</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1994</li>
<li class="van-ellipsis van-picker-column__item" style="height: 50px;">1995</li>
</ul>
</div>
`;