Area province and city selection

introduce

Three-level linkage selection of provinces and cities, usually used in conjunction with the popup layer component.

Code Demo

Basic usage

When initializing the province and city components, you need to pass in the province and city data through the area-list attribute.

<z-area title="title" :area-list="areaList" />

areaList format

areaList is an object structure, including three keys: province_list, city_list, and county_list.

Each item uses the area code as the key and the province and city name as the value. The area code is a 6-digit number. The first two digits represent the province, the middle two digits represent the city, and the last two digits represent the district and county. The six digits are supplemented with 0s. For example, the area code of Beijing is 11, padding 6 digits with 0, it is 110000.

Sample data is as follows:

const areaList = {
   province_list: {
     110000: 'Beijing City',
     120000: 'Tianjin City',
   },
   city_list: {
     110100: 'Beijing',
     120100: 'Tianjin City',
   },
   county_list: {
     110101: 'Dongcheng District',
     110102: 'Xicheng District',
     // ....
   },
};

China province and city data

The sample project of zebra-ui provides Chinese province and city data, which can be copied and quoted directly.

import { areaList } from '../../common/js/area'

Control selected items

Bind the currently selected region code through v-model.

<z-area v-model="valueSelect" title="title" :area-list="areaList" />

import { ref } from 'vue';
import { areaList } from '../../common/js/area'
const valueSelect = ref('330302')

Configure display columns

You can configure the number of columns displayed in provinces and cities through the columns-num attribute. By default, provinces and cities will be displayed. When you set it to 2, only provinces and cities will be displayed.

<z-area title="title" :area-list="areaList" :columns-num="2" />

Configure column placeholder prompt text

The placeholder text for each column can be configured through the columns-placeholder attribute.

<z-area
   title="title"
   :area-list="areaList"
   :columns-placeholder="['Please select', 'Please select', 'Please select']"
/>

API

Props

Parameters	Description	Type	Default value
v-model	The area code corresponding to the currently selected item	string	-
title	Top column title	string	-
confirm-button-text	Confirm button text	string	`Confirm`
cancel-button-text	Cancel button text	string	`Cancel`
area-list	Province and city data	object	-
columns-placeholder	Column placeholder prompt text	string	`[]`
loading	whether to display loading status	boolean	`false`
readonly	Whether it is in read-only state. Options cannot be switched in read-only state	boolean	`false`
option-height	Option height, supports `rpx` unit, default `px`	number \| string	`44`
columns-num	Display the number of columns, 3-province and city, 2-province and city, 1-province	number \| string	`3`
visible-option-num	Number of visible options	number \| string	`6`
swipe-duration	The duration of inertial scrolling during fast swiping, unit `ms`	number \| string	`1000`

Events

Event name	Description	Callback parameters
confirm	Triggered when the completion button is clicked	{ selectedValues, selectedOptions, selectedIndexes }
cancel	Triggered when the cancel button is clicked	{ selectedValues, selectedOptions, selectedIndexes }
change	Triggered when options change	{ selectedValues, selectedOptions, selectedIndexes, columnIndex }

Slots

Name	Description	Parameters
toolbar	Customize the entire top bar content	-
title	Custom title content	-
confirm	Customize the confirmation button content	-
cancel	Customize cancel button content	-
columns-top	Customize the content above the options	-
columns-bottom	Customize the content below the options	-

method

Area instances can be obtained through ref and instance methods can be called.

Method name	Description	Parameters	Return value
confirm	Stop inertial scrolling and trigger the `confirm` event	-	-
getSelectedOptions	Get the currently selected options	-	PickerOption