style(Picker): adjust default value of visible-item-count to 6 (#6827)

This commit is contained in:
neverland
2020-07-21 14:12:59 +08:00
committed by GitHub
parent ebb964aed8
commit 2d9f5d858a
15 changed files with 194 additions and 194 deletions
+1 -1
View File
@@ -253,7 +253,7 @@ export default {
| allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` |
| default-index | Default value index of single column picker | _number \| string_ | `0` |
| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
| visible-item-count | Count of visible columns | _number \| string_ | `6` |
| swipe-duration `v2.2.10` | Duration of the momentum animationunit `ms` | _number \| string_ | `1000` |
### Events
+1 -1
View File
@@ -276,7 +276,7 @@ export default {
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
| default-index | 单列选择时,默认选中项的索引 | _number \| string_ | `0` |
| item-height `v2.8.6` | 选项高度,支持 `px` `vw` `rem` 单位,默认 `px` | _number \| string_ | `44` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长,单位 `ms` | _number \| string_ | `1000` |
### Events
+1 -1
View File
@@ -23,7 +23,7 @@ export const pickerProps = {
},
visibleItemCount: {
type: [Number, String],
default: 5,
default: 6,
},
swipeDuration: {
type: [Number, String],
+26 -26
View File
@@ -8,9 +8,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">杭州</div>
</li>
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -40,9 +40,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">杭州</div>
</li>
@@ -60,7 +60,7 @@ exports[`renders demo correctly 1`] = `
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -72,9 +72,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">周一</div>
</li>
@@ -93,7 +93,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">上午</div>
</li>
@@ -105,7 +105,7 @@ exports[`renders demo correctly 1`] = `
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -117,9 +117,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">浙江</div>
</li>
@@ -129,7 +129,7 @@ exports[`renders demo correctly 1`] = `
</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;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">杭州</div>
</li>
@@ -139,7 +139,7 @@ exports[`renders demo correctly 1`] = `
</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;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">西湖区</div>
</li>
@@ -148,7 +148,7 @@ exports[`renders demo correctly 1`] = `
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -160,9 +160,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
<div class="van-ellipsis">杭州</div>
</li>
@@ -174,7 +174,7 @@ exports[`renders demo correctly 1`] = `
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -186,9 +186,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
</div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">浙江</div>
</li>
@@ -198,7 +198,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker-column column2">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">杭州</div>
</li>
@@ -216,7 +216,7 @@ exports[`renders demo correctly 1`] = `
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -228,9 +228,9 @@ exports[`renders demo correctly 1`] = `
<div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
</div>
<div class="van-loading van-loading--circular van-picker__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column column1">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">浙江</div>
</li>
@@ -240,7 +240,7 @@ exports[`renders demo correctly 1`] = `
</ul>
</div>
<div class="van-picker-column column2">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 22px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
<div class="van-ellipsis">杭州</div>
</li>
@@ -258,7 +258,7 @@ exports[`renders demo correctly 1`] = `
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -59,11 +59,11 @@ exports[`column watch default index 2`] = `
exports[`columns-top、columns-bottom prop 1`] = `
<div class="van-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
<!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;">
<!---->Custom Columns Top<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>Custom Columns Bottom
<!---->
@@ -73,15 +73,15 @@ exports[`columns-top、columns-bottom prop 1`] = `
exports[`not allow html 1`] = `
<div class="van-picker">
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
<div class="van-ellipsis">&lt;div&gt;option&lt;/div&gt;</div>
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -92,11 +92,11 @@ exports[`render title slot 1`] = `
<div class="van-picker">
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<!---->
@@ -106,9 +106,9 @@ exports[`render title slot 1`] = `
exports[`set rem item-height 1`] = `
<div class="van-picker">
<!---->
<div class="van-picker__columns" style="height: 800px;">
<div class="van-picker__columns" style="height: 960px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 320px, 0); transition-duration: 0ms; transition-property: none;">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 400px, 0); transition-duration: 0ms; transition-property: none;">
<li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 160px;">
<div class="van-ellipsis">1990</div>
</li>
@@ -117,7 +117,7 @@ exports[`set rem item-height 1`] = `
</li>
</ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 320px;"></div>
<div class="van-picker__mask" style="background-size: 100% 400px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 160px;"></div>
</div>
<!---->
@@ -128,11 +128,11 @@ exports[`toolbar-position prop 1`] = `
<div class="van-picker">
<!---->
<!---->
<div class="van-picker__columns" style="height: 220px;">
<div class="van-picker__columns" style="height: 264px;">
<div class="van-picker-column">
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;"></ul>
<ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;"></ul>
</div>
<div class="van-picker__mask" style="background-size: 100% 88px;"></div>
<div class="van-picker__mask" style="background-size: 100% 110px;"></div>
<div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
</div>
<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>