May 07, 2021 Vant
The three-tier linkage selection for the city and city, usually used in conjunction with the pop-up layer component
import Vue from 'vue';
import { Area } from 'vant';
Vue.use(Area);
To initialize an Area component, you need to pass in an area-list property, and the data format can be seen in the data format section below
<van-area :area-list="areaList" />
If you want to select a province, you need to pass in a value property that binds the corresponding provincial code
<van-area :area-list="areaList" value="110101" />
You can configure the number of columns displayed in the province by the columns-num property, and by default the city will be displayed, and when you set it to 2, only the provincial and municipal selections will be displayed
<van-area :area-list="areaList" :columns-num="2" title="标题" />
The placeholder text for each column can be configured through the columns-placeholder property
<van-area
:area-list="areaList"
:columns-placeholder="['请选择', '请选择', '请选择']"
title="标题"
/>
Parameters | Description | Type | The default |
---|---|---|---|
value |
The currently selected provincial
code
|
string | - |
title | The title of the top bar | string | - |
confirm-button-text | Confirm the button text | string |
确认
|
cancel-button-text | Cancel the button text | string |
取消
|
area-list | Provincial data, formatted below | object | - |
columns-placeholder
v2.2.5
|
Column placeholder prompt text | string[] |
[]
|
loading | Whether to display the load status | boolean |
false
|
item-height | The height of the option | number | string |
44
|
columns-num | Show columns, 3-province, 2-province, 1-province | number | string |
3
|
visible-item-count | The number of visible options | number | string |
5
|
swipe-duration
v2.2.13
|
The length of inertial scrolling when sliding quickly, in
ms
|
number | string |
1000
|
is-oversea-code
v2.1.4
|
Based
code
checking overseas addresses, overseas addresses are classified separately
|
() => boolean | - |
Event | Description | Callback parameters |
---|---|---|
confirm | Click the top right to complete the button | An array parameter, depending on the format of the data format section below |
cancel | When you click the cancel button | - |
change | Triggered when the option changes | Picker instance, with all columns selected, the index for the current column |
Ref allows you to get to the Area instance and call the instance method, as detailed in the component instance method
The method name | Description | Parameters | Returns a value |
---|---|---|---|
reset | Reset all options based on code, or reset to the first item if code is not passed on | code?: string | - |
The whole is an object that contains province_list, city_list, county_list three keys.
Each item is keyed by the provincial code and value by the provincial name. C oded as 6 digits, the first two represent the province, the middle two represent the city, and the last two represent the district and county, complementing the six digits with 0. For example, Beijing code is 11, with zero complement 6 bits, 110,000.
The format of AreaList is as follows:
{
province_list: {
110000: '北京市',
120000: '天津市'
},
city_list: {
110100: '北京市',
110200: '县',
120100: '天津市',
120200: '县'
},
county_list: {
110101: '东城区',
110102: '西城区',
110105: '朝阳区',
110106: '丰台区'
120101: '和平区',
120102: '河东区',
120103: '河西区',
120104: '南开区',
120105: '河北区',
// ....
}
}
The data returned is an array that contains columnsNum data, each corresponding to the selected data in a column of options.
Code represents the selected region code, and name represents the selected region name
[
{
code: '110000',
name: '北京市'
},
{
code: '110100',
name: '北京市'
},
{
code: '110101',
name: '东城区'
}
];