docs: prettier all markdown files
This commit is contained in:
chenjiahan
neverland
+83
-81
@@ -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 |
|
||||
|
||||
Reference in New Issue
Block a user