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

This commit is contained in:
neverland
2019-03-10 17:22:31 +08:00
committed by GitHub
parent cca584e9d5
commit cb72fef807
5 changed files with 101 additions and 42 deletions
+37 -19
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