alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[Improvement] Picker: rewrite (#370)

Browse Source 
* [Improvement] Picker code review

* fix: Picker text cases

* fix: Picker watch defaultIndex

* [Improvement] Picker support simple data struct

* [bugfix] Picker defaultIndex out of range
This commit is contained in:
neverland
2017-12-05 13:07:25 +08:00
committed by GitHub
parent b07f55bb51
commit 32801b453b
15 changed files with 540 additions and 702 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/demos/views/area.vue
+3 -2
View File
@@ -5,7 +5,7 @@
</demo-block>
<demo-block :title="$t('title2')">
<van-area :areaList="areaList" value="110101" />
<van-area :areaList="areaList" :value="value" />
</demo-block>
<demo-block :title="$t('title3')">
@@ -31,7 +31,8 @@ export default {
data() {
return {
areaList: AreaList
areaList: AreaList,
value: '110101'
};
}
};
docs/demos/views/picker.vue
+51 -26
View File
@@ -1,19 +1,26 @@
<template>
<demo-section>
<demo-block :title="$t('basicUsage')">
<van-picker :columns="columns" @change="onChange" />
<van-picker :columns="$t('column1')" @change="onChange1" />
</demo-block>
<demo-block :title="$t('title2')">
<van-picker :columns="$t('column2')" />
</demo-block>
<demo-block :title="$t('title3')">
<van-picker
showToolbar
:title="$t('area')"
:columns="columns"
@change="onChange"
:columns="$t('column1')"
@cancel="onCancel"
@confirm="onConfirm"
/>
</demo-block>
<demo-block :title="$t('title4')">
<van-picker :columns="columns" @change="onChange2" />
</demo-block>
</demo-section>
</template>
@@ -21,26 +28,45 @@
export default {
i18n: {
'zh-CN': {
area: '地区选择',
title2: '带 toolbar 的 Picker',
column: {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
}
area: '标题',
title2: '禁用选项',
title3: '展示顶部栏',
title4: '多列联动',
column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
column2: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' }
],
column3: {
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州']
},
toastContent: (value, index) => `当前值：${value}, 当前索引：${index}`
},
'en-US': {
area: 'Title',
title2: 'Disable Option',
title3: 'Show Toolbar',
title4: 'Multi Columns',
title2: 'Picker with toolbar',
column: {
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
}
column1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
column2: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' }
],
column3: {
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas']
},
toastContent: (value, index) => `Value: ${value}, Index：${index}`
}
},
computed: {
columns() {
const column = this.$t('column');
const column = this.$t('column3');
return [
{
values: Object.keys(column),
@@ -48,27 +74,26 @@ export default {
},
{
values: column[Object.keys(column)[0]],
className: 'column2'
className: 'column2',
defaultIndex: 2
}
];
}
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, this.$t('column')[values[0]]);
onChange1(picker, value, index) {
Toast(this.$t('toastContent', value, index));
},
onChange2(picker, values) {
picker.setColumnValues(1, this.$t('column3')[values[0]]);
},
onConfirm(value, index) {
Toast(this.$t('toastContent', value, index));
},
onCancel() {
Toast('picker cancel');
},
onConfirm() {
Toast('picker confirm');
Toast(this.$t('cancel'));
}
}
};
</script>
<style lang="postcss">
</style>
docs/markdown/en-US/picker.md
+71 -49
View File
@@ -11,55 +11,79 @@ Vue.component(Picker.name, Picker);
#### Basic Usage
```html
<van-picker :columns="pickerColumns" @change="onChange" />
<van-picker :columns="columns" @change="onChange" />
```
```javascript
const states = {
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
};
export default {
data() {
return {
pickerColumns: [
{
values: Object.keys(states),
className: 'column1'
},
{
values: states.Group1,
className: 'column2'
}
]
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
onChange(picker, value, index) {
Toast(`Value: ${value}, Index: ${index}`);
}
};
```
#### Disable option
#### Picker with toolbar
```html
<van-picker :columns="columns" />
```
```javascript
export default {
data() {
return {
columns: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' }
]
};
}
};
```
#### Show Toolbar
```html
<van-picker
showToolbar
:title="title"
:columns="pickerColumns"
@change="onChange"
: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'],
@@ -69,29 +93,22 @@ const states = {
export default {
data() {
return {
title: 'Title',
pickerColumns: [
columns: [
{
values: Object.keys(states),
className: 'column1'
},
{
values: states.Group1,
className: 'column2'
className: 'column2',
defaultIndex: 2
}
]
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
},
onCancel() {
Toast('Cancel');
},
onConfirm() {
Toast('Confirm');
picker.setColumnValues(1, states[values[0]]);
}
}
};
@@ -101,11 +118,12 @@ export default {
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
| itemHeight | Item height | `Number` | `44` | - |
| columns | Columns data | `Array` | - | - |
| showToolbar | Whether to show toolbar | `Boolean` | `true` | - |
| title | Toolbar title | `String` | - | - |
| columns | Columns data | `Array` | `[]` | - |
| showToolbar | Whether to show toolbar | `Boolean` | `false` | - |
| title | Toolbar title | `String` | `''` | - |
| itemHeight | Option height | `Number` | `44` | - |
| visibileColumnCount | Count of visible columns | `Number` | `5` | - |
| valueKey | Key of option text | `String` | `text` | - |
### Data struct of columns
@@ -116,13 +134,17 @@ export default {
| className | ClassName for this column |
### Picker instance
The first argument of change event's callback function is a picker instance with some methods
You can get the picker instance in 'change' event, and
| Method | Description |
|-----------|-----------|
| getColumnValue(index) | get current value of the column |
| setColumnValue(index, value) | set current value of the column |
| getColumnValues(index) | get all values of the column |
| setColumnValues(index, values) | set all values of the column |
| getValues() | get current values of all columns |
| setValues(values) | set current values of all columns |
| 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 |
docs/markdown/zh-CN/picker.md
+80 -56
View File
@@ -9,87 +9,108 @@ Vue.component(Picker.name, Picker);
### 代码演示
#### 基础用法
```html
<van-picker :columns="pickerColumns" @change="onChange" />
<van-picker :columns="columns" @change="onChange" />
```
```javascript
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州', '绍兴', '金华', '衢州'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州', '漳州', '南平', '龙岩']
};
export default {
data() {
return {
pickerColumns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: citys['浙江'],
className: 'column2'
}
]
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
onChange(picker, value, index) {
Toast(`当前值：${value}, 当前索引：${index}`);
}
};
```
#### 带 toolbar 的 Picker
#### 禁用选项
选项可以为对象结构，通过设置 disabled 来禁用该选项
```html
<van-picker :columns="columns" />
```
```javascript
export default {
data() {
return {
columns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' }
]
};
}
};
```
#### 展示顶部栏
```html
<van-picker
showToolbar
:title="title"
:columns="pickerColumns"
@change="onChange"
: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 {
title: '地区选择',
pickerColumns: [
columns: [
{
values: Object.keys(citys),
className: 'column1'
},
{
values: citys['浙江'],
className: 'column2'
className: 'column2',
defaultIndex: 2
}
]
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
},
onCancel() {
Toast('picker cancel');
},
onConfirm() {
Toast('picker confirm');
}
}
};
@@ -99,31 +120,34 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
| itemHeight | 选中元素区高度 | `Number` | `44` | - |
| columns | 对象数组，配置每一列显示的数据 | `Array` | - | - |
| showToolbar | 是否在组件顶部显示一个toolbar | `Boolean` | `true` | - |
| title | 在toolbar上显示的标题文字 | `String` | - | - |
| columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - |
| showToolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
| title | 顶部栏标题 | `String` | `''` | - |
| itemHeight | 选项高度 | `Number` | `44` | - |
| visibileColumnCount | 可见的选项个数 | `Number` | `5` | - |
| valueKey | 选项对象中，文字对应的 key | `String` | `text` | - |
### columns
`API`中的`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`：
### Columns 数据结构
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
| key | 说明 |
|-----------|-----------|
| values | 列中对应的备选值 |
| defaultIndex | 初始选中值的索引，默认为0 |
| className | 为对应列添加特殊的`class` |
| defaultIndex | 初始选中项的索引，默认为 0 |
| className | 为对应列添加额外的`class` |
### change事件
在`change`事件中，可以获取到`picker`实例，对`picker`进行相应的更新等操作：
### Picker 实例
在`change`事件中，可以获取到`picker`实例，通过实例方法可以灵活控制 Picker 内容
| 函数 | 说明 |
|-----------|-----------|
| getColumnValue(index) | 获取对应列中选中的值 |
| setColumnValue(index, value) | 设置对应列中选中的值 |
| getColumnValues(index) | 获取对应列中所有的备选值 |
| setColumnValues(index, values) | 设置对应列中所有的备选值 |
| getValues() | 获取所有列中被选中的值，返回一个数组 |
| setValues(values) | `values`为一个数组，设置所有列中被选中的值 |
| getValues() | 获取所有列选中的值，返回一个数组 |
| setValues(values) | 设置所有列选中的值 |
| getIndexes() | 获取所有列选中值对应的索引，返回一个数组 |
| setIndexes(indexes) | 设置所有列选中值对应的索引 |
| getColumnValue(columnIndex) | 获取对应列选中的值 |
| setColumnValue(columnIndex, value) | 设置对应列选中的值 |
| getColumnIndex(columnIndex) | 获取对应列选中项的索引 |
| setColumnIndex(columnIndex, optionIndex) | 设置对应列选中项的索引 |
| getColumnValues(columnIndex) | 获取对应列中所有选项 |
| setColumnValues(columnIndex, values) | 设置对应列中所有选项 |