[Improvement] Reorganize document (#1066)
This commit is contained in:
neverland
@@ -0,0 +1,173 @@
|
||||
## Picker
|
||||
The Picker component is usually used with [Popup](#/en-US/popup) Component.
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Picker } from 'vant';
|
||||
|
||||
Vue.use(Picker);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, value, index) {
|
||||
Toast(`Value: ${value}, Index: ${index}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Disable option
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{ text: 'Delaware', disabled: true },
|
||||
{ text: 'Florida' },
|
||||
{ text: 'Georqia' }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Show Toolbar
|
||||
|
||||
```html
|
||||
<van-picker
|
||||
show-toolbar
|
||||
title="Title"
|
||||
:columns="columns"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value, index) {
|
||||
Toast(`Value: ${value}, Index: ${index}`);
|
||||
},
|
||||
onCancel() {
|
||||
Toast('Cancel');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Multi columns
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
const states = {
|
||||
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
|
||||
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
values: Object.keys(states),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: states.Group1,
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, states[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### Loading
|
||||
When Picker columns data is acquired asynchronously, use `loading` prop to show loading prompt
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" loading />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| columns | Columns data | `Array` | `[]` |
|
||||
| show-toolbar | Whether to show toolbar | `Boolean` | `false` |
|
||||
| title | Toolbar title | `String` | `''` |
|
||||
| loading | Whether to show loading prompt | `Boolean` | `false` |
|
||||
| value-key | Key of option text | `String` | `text` |
|
||||
| item-height | Option height | `Number` | `44` |
|
||||
| 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` |
|
||||
|
||||
### Event
|
||||
Picker events will pass different parameters according to the columns are single or multiple
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | Triggered when click confirm button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
|
||||
| cancel | Triggered when click cancel button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
|
||||
| change | Triggered when current option changed | Single column：Picker instance, current value，current index<br>Multiple columns：Picker instance, current values，column index |
|
||||
|
||||
|
||||
### Data struct of columns
|
||||
|
||||
| key | Description |
|
||||
|-----------|-----------|
|
||||
| values | Value of column |
|
||||
| defaultIndex | Default value index |
|
||||
| className | ClassName for this column |
|
||||
|
||||
### Picker instance
|
||||
You can get the picker instance in 'change' event, and
|
||||
|
||||
| Method | Description |
|
||||
|-----------|-----------|
|
||||
| getValues() | Get current values of all columns |
|
||||
| setValues(values) | Set current values of all columns |
|
||||
| getIndexes() | Get current indexes of all columns |
|
||||
| setIndexes(indexes) | Set current indexes of all columns |
|
||||
| getColumnValue(columnIndex) | Get current value of the column |
|
||||
| setColumnValue(columnIndex, value) | Set current value of the column |
|
||||
| getColumnIndex(columnIndex) | Get current index of the column |
|
||||
| setColumnIndex(columnIndex, optionIndex) | Set current index of the column |
|
||||
| getColumnValues(columnIndex) | Get columns data of the column |
|
||||
| setColumnValues(columnIndex, values) | Set columns data of the column |
|
||||
@@ -0,0 +1,176 @@
|
||||
## Picker 选择器
|
||||
选择器组件通常与 [弹出层](#/zh-CN/popup) 组件配合使用
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Picker } from 'vant';
|
||||
|
||||
Vue.use(Picker);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, value, index) {
|
||||
Toast(`当前值：${value}, 当前索引：${index}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 禁用选项
|
||||
选项可以为对象结构，通过设置 disabled 来禁用该选项
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{ text: '杭州', disabled: true },
|
||||
{ text: '宁波' },
|
||||
{ text: '温州' }
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 展示顶部栏
|
||||
|
||||
```html
|
||||
<van-picker
|
||||
show-toolbar
|
||||
title="标题"
|
||||
:columns="columns"
|
||||
@cancel="onCancel"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onConfirm(value, index) {
|
||||
Toast(`当前值：${value}, 当前索引：${index}`);
|
||||
},
|
||||
onCancel() {
|
||||
Toast('取消');
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 多列联动
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" @change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
const citys = {
|
||||
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
|
||||
'福建': ['福州', '厦门', '莆田', '三明', '泉州']
|
||||
};
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
values: Object.keys(citys),
|
||||
className: 'column1'
|
||||
},
|
||||
{
|
||||
values: citys['浙江'],
|
||||
className: 'column2',
|
||||
defaultIndex: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange(picker, values) {
|
||||
picker.setColumnValues(1, citys[values[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
#### 加载状态
|
||||
当 Picker 数据是通过异步获取时，可以通过 `loading` 属性显示加载提示
|
||||
|
||||
```html
|
||||
<van-picker :columns="columns" loading />
|
||||
```
|
||||
|
||||
### API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` |
|
||||
| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` |
|
||||
| title | 顶部栏标题 | `String` | `''` |
|
||||
| loading | 是否显示加载状态 | `Boolean` | `false` |
|
||||
| value-key | 选项对象中，文字对应的 key | `String` | `text` |
|
||||
| item-height | 选项高度 | `Number` | `44` |
|
||||
| confirm-button-text | 确认按钮文字 | `String` | `确认` |
|
||||
| cancel-button-text | 取消按钮文字 | `String` | `取消` |
|
||||
| visible-item-count | 可见的选项个数 | `Number` | `5` |
|
||||
|
||||
### Event
|
||||
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
|-----------|-----------|-----------|
|
||||
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
|
||||
|
||||
### Columns 数据结构
|
||||
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
|
||||
|
||||
| key | 说明 |
|
||||
|-----------|-----------|
|
||||
| values | 列中对应的备选值 |
|
||||
| defaultIndex | 初始选中项的索引，默认为 0 |
|
||||
| className | 为对应列添加额外的`class` |
|
||||
|
||||
### Picker 实例
|
||||
在`change`事件中，可以获取到`picker`实例，通过实例方法可以灵活控制 Picker 内容
|
||||
|
||||
| 函数 | 说明 |
|
||||
|-----------|-----------|
|
||||
| getValues() | 获取所有列选中的值，返回一个数组 |
|
||||
| setValues(values) | 设置所有列选中的值 |
|
||||
| getIndexes() | 获取所有列选中值对应的索引，返回一个数组 |
|
||||
| setIndexes(indexes) | 设置所有列选中值对应的索引 |
|
||||
| getColumnValue(columnIndex) | 获取对应列选中的值 |
|
||||
| setColumnValue(columnIndex, value) | 设置对应列选中的值 |
|
||||
| getColumnIndex(columnIndex) | 获取对应列选中项的索引 |
|
||||
| setColumnIndex(columnIndex, optionIndex) | 设置对应列选中项的索引 |
|
||||
| getColumnValues(columnIndex) | 获取对应列中所有选项 |
|
||||
| setColumnValues(columnIndex, values) | 设置对应列中所有选项 |
|
||||
Reference in New Issue
Block a user