docs: prettier all markdown files
This commit is contained in:
chenjiahan
neverland
+39
-36
@@ -17,7 +17,7 @@ Vue.use(Area);
|
||||
|
||||
### Basic Usage
|
||||
|
||||
To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
|
||||
To initailize `Area` component, `area-list` property is required. Data structure will be introduced later.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" />
|
||||
@@ -33,8 +33,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
|
||||
|
||||
### Columns Number
|
||||
|
||||
`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
|
||||
Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default. Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
|
||||
```html
|
||||
<van-area :area-list="areaList" :columns-num="2" title="Title" />
|
||||
@@ -57,48 +56,47 @@ Set `columns-num` with 2, you'll have a 2 level picker.
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| value | the `code` of selected area | *string* | - |
|
||||
| title | Toolbar title | *string* | - |
|
||||
| confirm-button-text | Text of confirm button | *string* | `Confirm` |
|
||||
| cancel-button-text | Text of cancel button | *string* | `Cancel` |
|
||||
| area-list | Area list data | *object* | - |
|
||||
| columns-placeholder `v2.2.5` | Placeholder of columns | *string[]* | `[]` |
|
||||
| loading | Whether to show loading prompt | *boolean* | `false` |
|
||||
| item-height | Option height | *number \| string* | `44` |
|
||||
| columns-num | Level of picker | *number \| string* | `3` |
|
||||
| visible-item-count | Count of visible columns | *number \| string* | `5` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | *number \| string* | `1000` |
|
||||
| is-oversea-code `v2.1.4` | The method to validate oversea code | *() => boolean* | - |
|
||||
| --- | --- | --- | --- |
|
||||
| value | the `code` of selected area | _string_ | - |
|
||||
| title | Toolbar title | _string_ | - |
|
||||
| confirm-button-text | Text of confirm button | _string_ | `Confirm` |
|
||||
| cancel-button-text | Text of cancel button | _string_ | `Cancel` |
|
||||
| area-list | Area list data | _object_ | - |
|
||||
| columns-placeholder `v2.2.5` | Placeholder of columns | _string[]_ | `[]` |
|
||||
| loading | Whether to show loading prompt | _boolean_ | `false` |
|
||||
| item-height | Option height | _number \| string_ | `44` |
|
||||
| columns-num | Level of picker | _number \| string_ | `3` |
|
||||
| visible-item-count | Count of visible columns | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
|
||||
| is-oversea-code `v2.1.4` | The method to validate oversea code | _() => boolean_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| --- | --- | --- |
|
||||
| confirm | triggers when clicking the confirm button | an array |
|
||||
| cancel | triggers when clicking the cancel button | - |
|
||||
| change | Triggered when current option changed | Picker instance, current values，column index |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| title `v2.5.3` | Custom title |
|
||||
| columns-top `v2.5.3` | Custom content above columns |
|
||||
| Name | Description |
|
||||
| ----------------------- | ---------------------------- |
|
||||
| title `v2.5.3` | Custom title |
|
||||
| columns-top `v2.5.3` | Custom content above columns |
|
||||
| columns-bottom `v2.5.3` | Custom content below columns |
|
||||
|
||||
### Methods
|
||||
|
||||
Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods
|
||||
|
||||
| Name | Description | Attribute | Return value |
|
||||
|------|------|------|------|
|
||||
| reset | Reset all options by code | code?: string | - |
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | ------------------------- | ------------- | ------------ |
|
||||
| reset | Reset all options by code | code?: string | - |
|
||||
|
||||
### areaList Data Structure
|
||||
|
||||
An object contains three properties: `province_list`, `city_list` and `county_list`.
|
||||
Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
|
||||
An object contains three properties: `province_list`, `city_list` and `county_list`. Each property is a simple key-value object, key is a 6-bit code of the area of which first two bits stand for the province or state, middle two bits are used as city code and the last two are district code, value is the name of the area. If the code stands for an area that has sub-areas, lower bits of it will be filled with 0.
|
||||
|
||||
Example of `AreaList`
|
||||
|
||||
@@ -131,15 +129,20 @@ All code of China: [Area.json](https://github.com/youzan/vant/blob/dev/src/area/
|
||||
An array contains selected area objects.
|
||||
|
||||
`code` - code of selected area, `name` - name of selected area
|
||||
|
||||
```js
|
||||
[{
|
||||
code: '330000',
|
||||
name: 'Zhejiang Province'
|
||||
}, {
|
||||
code: '330100',
|
||||
name: 'Hangzhou'
|
||||
},{
|
||||
code: '330105',
|
||||
name: 'Xihu District'
|
||||
}]
|
||||
[
|
||||
{
|
||||
code: '330000',
|
||||
name: 'Zhejiang Province',
|
||||
},
|
||||
{
|
||||
code: '330100',
|
||||
name: 'Hangzhou',
|
||||
},
|
||||
{
|
||||
code: '330105',
|
||||
name: 'Xihu District',
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
+27
-27
@@ -56,34 +56,34 @@ Vue.use(Area);
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|------|
|
||||
| value | 当前选中的省市区`code` | *string* | - |
|
||||
| title | 顶部栏标题 | *string* | - |
|
||||
| confirm-button-text | 确认按钮文字 | *string* | `确认` |
|
||||
| cancel-button-text | 取消按钮文字 | *string* | `取消` |
|
||||
| area-list | 省市区数据，格式见下方 | *object* | - |
|
||||
| columns-placeholder `v2.2.5` | 列占位提示文字 | *string[]* | `[]` |
|
||||
| loading | 是否显示加载状态 | *boolean* | `false` |
|
||||
| item-height | 选项高度 | *number \| string* | `44` |
|
||||
| columns-num | 显示列数，3-省市区，2-省市，1-省 | *number \| string* | `3` |
|
||||
| visible-item-count | 可见的选项个数 | *number \| string* | `5` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | *number \| string* | `1000` |
|
||||
| is-oversea-code `v2.1.4` | 根据`code`校验海外地址，海外地址会划分至单独的分类 | *() => boolean* | - |
|
||||
| --- | --- | --- | --- |
|
||||
| value | 当前选中的省市区`code` | _string_ | - |
|
||||
| title | 顶部栏标题 | _string_ | - |
|
||||
| confirm-button-text | 确认按钮文字 | _string_ | `确认` |
|
||||
| cancel-button-text | 取消按钮文字 | _string_ | `取消` |
|
||||
| area-list | 省市区数据，格式见下方 | _object_ | - |
|
||||
| columns-placeholder `v2.2.5` | 列占位提示文字 | _string[]_ | `[]` |
|
||||
| loading | 是否显示加载状态 | _boolean_ | `false` |
|
||||
| item-height | 选项高度 | _number \| string_ | `44` |
|
||||
| columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` |
|
||||
| visible-item-count | 可见的选项个数 | _number \| string_ | `5` |
|
||||
| swipe-duration `v2.2.13` | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
|
||||
| is-oversea-code `v2.1.4` | 根据`code`校验海外地址，海外地址会划分至单独的分类 | _() => boolean_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| ------- | ------------------ | ------------------------------------------- |
|
||||
| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
|
||||
| cancel | 点击取消按钮时 | - |
|
||||
| change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| title `v2.5.3` | 自定义标题内容 |
|
||||
| columns-top `v2.5.3` | 自定义选项上方内容 |
|
||||
| 名称 | 说明 |
|
||||
| ----------------------- | ------------------ |
|
||||
| title `v2.5.3` | 自定义标题内容 |
|
||||
| columns-top `v2.5.3` | 自定义选项上方内容 |
|
||||
| columns-bottom `v2.5.3` | 自定义选项下方内容 |
|
||||
|
||||
### 方法
|
||||
@@ -91,7 +91,7 @@ Vue.use(Area);
|
||||
通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
|------|------|------|------|
|
||||
| --- | --- | --- | --- |
|
||||
| reset | 根据 code 重置所有选项，若不传 code，则重置到第一项 | code?: string | - |
|
||||
|
||||
### 省市区列表数据格式
|
||||
@@ -141,16 +141,16 @@ Vue.use(Area);
|
||||
[
|
||||
{
|
||||
code: '110000',
|
||||
name: '北京市'
|
||||
name: '北京市',
|
||||
},
|
||||
{
|
||||
code: '110100',
|
||||
name: '北京市'
|
||||
name: '北京市',
|
||||
},
|
||||
{
|
||||
code: '110101',
|
||||
name: '东城区'
|
||||
}
|
||||
name: '东城区',
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user