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

[new feature] Picker: add default-index prop (#2935)

Browse Source
This commit is contained in:
neverland 2019-03-10 17:22:31 +08:00 committed by GitHub
parent cca584e9d5
commit cb72fef807
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 101 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/picker/demo/index.vue
View File

@ -7,8 +7,12 @@
/>
</demo-block>
<demo-block :title="$t('title2')">
<van-picker :columns="$t('column2')" />
<demo-block :title="$t('defaultIndex')">
<van-picker
:columns="$t('column1')"
:default-index="2"
@change="onChange1"
/>
</demo-block>
<demo-block :title="$t('title3')">
@ -21,6 +25,10 @@
/>
</demo-block>
<demo-block :title="$t('title2')">
<van-picker :columns="$t('column2')" />
</demo-block>
<demo-block :title="$t('title4')">
<van-picker
:columns="columns"
@ -45,6 +53,7 @@ export default {
title2: '禁用选项',
title3: '展示顶部栏',
title4: '多列联动',
defaultIndex: '默认选中项',
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
column2: [
{ text: '杭州', disabled: true },
@ -62,6 +71,7 @@ export default {
title2: 'Disable Option',
title3: 'Show Toolbar',
title4: 'Multi Columns',
defaultIndex: 'Default Index',
column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
column2: [
{ text: 'Delaware', disabled: true },

43
packages/picker/en-US.md
View File

@ -31,24 +31,14 @@ export default {
};
```
#### Disable option
#### Default Index
```html
<van-picker :columns="columns" />
```
```javascript
export default {
data() {
return {
columns: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' }
]
};
}
};
<van-picker
:columns="columns"
:default-index="2"
@change="onChange"
/>
```
#### Show Toolbar
@ -81,6 +71,26 @@ export default {
};
```
#### Disable option
```html
<van-picker :columns="columns" />
```
```javascript
export default {
data() {
return {
columns: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' }
]
};
}
};
```
#### Multi columns
```html
@ -137,6 +147,7 @@ When Picker columns data is acquired asynchronously, use `loading` prop to show
| confirm-button-text | Text of confirm button | `String` | `Confirm` |
| cancel-button-text | Text of cancel button | `String` | `Cancel` |
| visible-item-count | Count of visible columns | `Number` | `5` |
| default-index | Default value index of single column picker | `Number` | `0` |
### Event
Picker events will pass different parameters according to the columns are single or multiple

6
packages/picker/index.js
View File

@ -11,6 +11,10 @@ export default sfc({
props: {
...pickerProps,
columns: Array,
defaultIndex: {
type: Number,
default: 0
},
valueKey: {
type: String,
default: 'text'
@ -185,7 +189,7 @@ export default sfc({
valueKey={this.valueKey}
className={item.className}
itemHeight={this.itemHeight}
defaultIndex={item.defaultIndex}
defaultIndex={item.defaultIndex || this.defaultIndex}
visibleItemCount={this.visibleItemCount}
initialOptions={this.simple ? item : item.values}
onChange={() => {

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

@ -22,10 +22,12 @@ exports[`renders demo correctly 1`] = `
<div class="van-picker">
<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" 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 style="transition:0ms;transform:translate3d(0, 0px, 0);line-height:44px;">
<li class="van-ellipsis van-picker-column__item" style="height:44px;">杭州</li>
<li class="van-ellipsis van-picker-column__item" style="height:44px;">宁波</li>
<li class="van-ellipsis van-picker-column__item van-picker-column__item--selected" style="height:44px;">温州</li>
<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>
@ -53,6 +55,20 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div>
<div class="van-picker">
<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" 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>
</div>
</div>
</div>
<div>
<div class="van-picker">
<div class="van-picker__columns" style="height:220px;">

56
packages/picker/zh-CN.md
View File

@ -10,9 +10,10 @@ Vue.use(Picker);
### 代码演示
#### 基础用法
对于单列选择器，传入数值格式的 columns 即可，同时可以监听选项改变的 change 事件
```html
<van-picker :columns="columns" @change="onChange" />
```
@ -32,29 +33,22 @@ export default {
};
```
#### 禁用选项
选项可以为对象结构，通过设置 disabled 来禁用该选项
#### 默认选中项
单列选择器可以直接通过`default-index`属性设置初始选中项的索引值
```html
<van-picker :columns="columns" />
```
```javascript
export default {
data() {
return {
columns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' }
]
};
}
};
<van-picker
:columns="columns"
:default-index="2"
@change="onChange"
/>
```
#### 展示顶部栏
通常选择器组件会传入`show-toolbar`属性以展示顶部操作栏，并可以监听对应的`confirm`和`cancel`事件
```html
<van-picker
show-toolbar
@ -83,6 +77,28 @@ export default {
};
```
#### 禁用选项
选项可以为对象结构，通过设置 disabled 来禁用该选项
```html
<van-picker :columns="columns" />
```
```javascript
export default {
data() {
return {
columns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' }
]
};
}
};
```
#### 多列联动
```html
@ -120,7 +136,8 @@ export default {
```
#### 加载状态
当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
若选择器数据是异步获取的，可以通过 `loading` 属性显示加载提示
```html
<van-picker :columns="columns" loading />
@ -139,6 +156,7 @@ export default {
| confirm-button-text | 确认按钮文字 | `String` | `确认` | - |
| cancel-button-text | 取消按钮文字 | `String` | `取消` | - |
| visible-item-count | 可见的选项个数 | `Number` | `5` | - |
| default-index | 单列选择器的默认选中项索引，<br>多列选择器请参考下方的 Columns 配置 | `Number` | `0` | 1.6.9 |
### Event