ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-22 11:54:02 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

docs: prettier all markdown files

Browse Source
This commit is contained in:
chenjiahan
2020-04-11 09:09:00 +08:00
committed by neverland
parent 48067f79db
commit 7f84f8a487
140 changed files with 4441 additions and 4723 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/picker/README.md
View File

@@ -27,25 +27,21 @@ import { Toast } from 'vant';
export default {
data() {
return {
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
};
},
methods: {
onChange(picker, value, index) {
Toast(`Value: ${value}, Index: ${index}`);
}
}
},
},
};
```
### Default Index
```html
<van-picker
:columns="columns"
:default-index="2"
@change="onChange"
/>
<van-picker :columns="columns" :default-index="2" @change="onChange" />
```
### Show Toolbar
@@ -66,8 +62,8 @@ import { Toast } from 'vant';
export default {
data() {
return {
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
}
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
};
},
methods: {
onConfirm(value, index) {
@@ -75,8 +71,8 @@ export default {
},
onCancel() {
Toast('Cancel');
}
}
},
},
};
```
@@ -93,15 +89,15 @@ export default {
columns: [
{
values: ['Monday', 'Tuesday', 'Wednesday', 'Thusday', 'Friday'],
defaultIndex: 2
defaultIndex: 2,
},
{
values: ['Morging', 'Afternoon', 'Evening'],
defaultIndex: 1
}
]
defaultIndex: 1,
},
],
};
}
},
};
```
@@ -115,27 +111,36 @@ export default {
export default {
data() {
return {
columns: [{
text: 'Zhejiang',
children: [{
text: 'Hangzhou',
children: [{ text: 'Xihu' }, { text: 'Yuhang' }]
}, {
text: 'Wenzhou',
children: [{ text: 'Lucheng' }, { text: 'Ouhai' }]
}]
}, {
text: 'Fujian',
children: [{
text: 'Fuzhou',
children: [{ text: 'Gulou' }, { text: 'Taijiang' }]
}, {
text: 'Xiamen',
children: [{ text: 'Siming' }, { text: 'Haicang' }]
}]
}]
columns: [
{
text: 'Zhejiang',
children: [
{
text: 'Hangzhou',
children: [{ text: 'Xihu' }, { text: 'Yuhang' }],
},
{
text: 'Wenzhou',
children: [{ text: 'Lucheng' }, { text: 'Ouhai' }],
},
],
},
{
text: 'Fujian',
children: [
{
text: 'Fuzhou',
children: [{ text: 'Gulou' }, { text: 'Taijiang' }],
},
{
text: 'Xiamen',
children: [{ text: 'Siming' }, { text: 'Haicang' }],
},
],
},
],
};
}
},
};
```
@@ -152,10 +157,10 @@ export default {
columns: [
{ text: 'Delaware', disabled: true },
{ text: 'Florida' },
{ text: 'Georqia' }
]
{ text: 'Georqia' },
],
};
}
},
};
```
@@ -167,24 +172,21 @@ export default {
```js
const states = {
'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
Group1: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
Group2: ['Alabama', 'Kansas', 'Louisiana', 'Texas'],
};
export default {
data() {
return {
columns: [
{ values: Object.keys(states) },
{ values: states.Group1 }
]
columns: [{ values: Object.keys(states) }, { values: states.Group1 }],
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, states[values[0]]);
}
}
},
},
};
```
@@ -201,7 +203,7 @@ export default {
data() {
return {
columns: [],
loading: true
loading: true,
};
},
created() {
@@ -209,7 +211,7 @@ export default {
this.loading = false;
this.columns = ['Option'];
}, 1000);
}
},
};
```
@@ -240,15 +242,15 @@ export default {
return {
value: '',
showPicker: false,
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine']
}
columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
};
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
}
}
},
},
};
```
@@ -257,55 +259,55 @@ export default {
### Props
| Attribute | Description | Type | Default |
|------|------|------|------|
| columns | Columns data | *Column[]* | `[]` |
| title | Toolbar title | *string* | - |
| confirm-button-text | Text of confirm button | *string* | `Confirm` |
| cancel-button-text | Text of cancel button | *string* | `Cancel` |
| value-key | Key of option text | *string* | `text` |
| toolbar-position | Toolbar position, cat be set to `bottom` | *string* | `top` |
| loading | Whether to show loading prompt | *boolean* | `false` |
| show-toolbar | Whether to show toolbar | *boolean* | `false` |
| 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 | Option height | *number \| string* | `44` |
| visible-item-count | Count of visible columns | *number \| string* | `5` |
| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | *number \| string* | `1000` |
| --- | --- | --- | --- |
| columns | Columns data | _Column[]_ | `[]` |
| title | Toolbar title | _string_ | - |
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
| value-key | Key of option text | _string_ | `text` |
| toolbar-position | Toolbar position, cat be set to `bottom` | _string_ | `top` |
| loading | Whether to show loading prompt | _boolean_ | `false` |
| show-toolbar | Whether to show toolbar | _boolean_ | `false` |
| 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 | Option height | _number \| string_ | `44` |
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
### Events
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 |
### Slots
| Name | Description |
|------|------|
| default | Custom toolbar content |
| title | Custom title |
| columns-top | Custom content above columns |
| Name | Description |
| -------------- | ---------------------------- |
| default | Custom toolbar content |
| title | Custom title |
| columns-top | Custom content above columns |
| columns-bottom | Custom content below columns |
### Data Structure of Column
| Key | Description | Type |
|------|------|------|
| values | Value of column | *string[]* |
| defaultIndex | Default value index | *number* |
| className | ClassName for this column | *any* |
| children `v2.4.5` | Cascade children | *Column* |
| Key | Description | Type |
| ----------------- | ------------------------- | ---------- |
| values | Value of column | _string[]_ |
| defaultIndex | Default value index | _number_ |
| className | ClassName for this column | _any_ |
| children `v2.4.5` | Cascade children | _Column_ |
### Methods
Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods
| Name | Description | Attribute | Return value |
|------|------|------|------|
| --- | --- | --- | --- |
| getValues | Get current values of all columns | - | values |
| setValues | Set current values of all columns | values | - |
| getIndexes | Get current indexes of all columns | - | indexes |

158
src/picker/README.zh-CN.md
View File

@@ -29,14 +29,14 @@ import { Toast } from 'vant';
export default {
data() {
return {
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
};
},
methods: {
onChange(picker, value, index) {
Toast(`当前值：${value}, 当前索引：${index}`);
}
}
},
},
};
```
@@ -68,8 +68,8 @@ import { Toast } from 'vant';
export default {
data() {
return {
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
}
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
};
},
methods: {
onConfirm(value, index) {
@@ -77,8 +77,8 @@ export default {
},
onCancel() {
Toast('取消');
}
}
},
},
};
```
@@ -98,16 +98,16 @@ export default {
// 第一列
{
values: ['周一', '周二', '周三', '周四', '周五'],
defaultIndex: 2
defaultIndex: 2,
},
// 第二列
{
values: ['上午', '下午', '晚上'],
defaultIndex: 1
}
]
defaultIndex: 1,
},
],
};
}
},
};
```
@@ -123,27 +123,36 @@ export default {
export default {
data() {
return {
columns: [{
text: '浙江',
children: [{
text: '杭州',
children: [{ text: '西湖区' }, { text: '余杭区' }]
}, {
text: '温州',
children: [{ text: '鹿城区' }, { text: '瓯海区' }]
}]
}, {
text: '福建',
children: [{
text: '福州',
children: [{ text: '鼓楼区' }, { text: '台江区' }]
}, {
text: '厦门',
children: [{ text: '思明区' }, { text: '海沧区' }]
}]
}]
columns: [
{
text: '浙江',
children: [
{
text: '杭州',
children: [{ text: '西湖区' }, { text: '余杭区' }],
},
{
text: '温州',
children: [{ text: '鹿城区' }, { text: '瓯海区' }],
},
],
},
{
text: '福建',
children: [
{
text: '福州',
children: [{ text: '鼓楼区' }, { text: '台江区' }],
},
{
text: '厦门',
children: [{ text: '思明区' }, { text: '海沧区' }],
},
],
},
],
};
}
},
};
```
@@ -164,10 +173,10 @@ export default {
columns: [
{ text: '杭州', disabled: true },
{ text: '宁波' },
{ text: '温州' }
]
{ text: '温州' },
],
};
}
},
};
```
@@ -181,24 +190,21 @@ export default {
```js
const citys = {
'浙江': ['杭州', '宁波', '温州', '嘉兴', '湖州'],
'福建': ['福州', '厦门', '莆田', '三明', '泉州']
浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
福建: ['福州', '厦门', '莆田', '三明', '泉州'],
};
export default {
data() {
return {
columns: [
{ values: Object.keys(citys) },
{ values: citys['浙江'] }
]
columns: [{ values: Object.keys(citys) }, { values: citys['浙江'] }],
};
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, citys[values[0]]);
}
}
},
},
};
```
@@ -215,7 +221,7 @@ export default {
data() {
return {
columns: [],
loading: true
loading: true,
};
},
created() {
@@ -223,7 +229,7 @@ export default {
this.loading = false;
this.columns = ['选项'];
}, 1000);
}
},
};
```
@@ -256,15 +262,15 @@ export default {
return {
value: '',
showPicker: false,
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州']
}
columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
};
},
methods: {
onConfirm(value) {
this.value = value;
this.showPicker = false;
}
}
},
},
};
```
@@ -273,57 +279,57 @@ export default {
### Props
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| columns | 对象数组，配置每一列显示的数据 | *Column[]* | `[]` |
| title | 顶部栏标题 | *string* | - |
| confirm-button-text | 确认按钮文字 | *string* | `确认` |
| cancel-button-text | 取消按钮文字 | *string* | `取消` |
| value-key | 选项对象中，选项文字对应的键名 | *string* | `text` |
| toolbar-position | 顶部栏位置，可选值为`bottom` | *string* | `top` |
| loading | 是否显示加载状态 | *boolean* | `false` |
| show-toolbar | 是否显示顶部栏 | *boolean* | `false` |
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | *boolean* | `true` |
| default-index | 单列选择时，默认选中项的索引 | *number \| string* | `0` |
| item-height | 选项高度 | *number \| string* | `44` |
| visible-item-count | 可见的选项个数 | *number \| string* | `5` |
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位`ms` | *number \| string* | `1000` |
| --- | --- | --- | --- |
| columns | 对象数组，配置每一列显示的数据 | _Column[]_ | `[]` |
| title | 顶部栏标题 | _string_ | - |
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
| value-key | 选项对象中，选项文字对应的键名 | _string_ | `text` |
| toolbar-position | 顶部栏位置，可选值为`bottom` | _string_ | `top` |
| loading | 是否显示加载状态 | _boolean_ | `false` |
| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` |
| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
| default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
| item-height | 选项高度 | _number \| string_ | `44` |
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
### Events
当选择器有多列时，事件回调参数会返回数组
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| --- | --- | --- |
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
### Slots
| 名称 | 说明 |
|------|------|
| default | 自定义顶部栏内容 |
| title | 自定义标题内容 |
| columns-top | 自定义选项上方内容 |
| 名称 | 说明 |
| -------------- | ------------------ |
| default | 自定义顶部栏内容 |
| title | 自定义标题内容 |
| columns-top | 自定义选项上方内容 |
| columns-bottom | 自定义选项下方内容 |
### Column 数据结构
当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`
| 键名 | 说明 | 类型 |
|------|------|------|
| values | 列中对应的备选值 | *string[]*
| defaultIndex | 初始选中项的索引，默认为 0 | *number* |
| className | 为对应列添加额外的类名 | *any* |
| children `v2.4.5` | 级联选项 | *Column* |
| 键名 | 说明 | 类型 |
| ----------------- | -------------------------- | ---------- |
| values | 列中对应的备选值 | _string[]_ |
| defaultIndex | 初始选中项的索引，默认为 0 | _number_ |
| className | 为对应列添加额外的类名 | _any_ |
| children `v2.4.5` | 级联选项 | _Column_ |
### 方法
通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
| 方法名 | 说明 | 参数 | 返回值 |
|------|------|------|------|
| --- | --- | --- | --- |
| getValues | 获取所有列选中的值 | - | values |
| setValues | 设置所有列选中的值 | values | - |
| getIndexes | 获取所有列选中值对应的索引 | - | indexes |