Using vant component area in Vue

Time:2021-4-23

1. Download the official area data file,
area.js
area.ts
Ifarea.jsIf it does not exist, download itarea.ts, and then converted to JS file
hold.tsChange the file name to.jsAnd thenexport const areaList = {}Change toexport default {}

2. Then it is introduced into Vue component of area component
import areaList from '../../assets/js/area.js'

3. Basic use

< van area: area list = "arealist" confirm button text = "confirm button" Cancel button text = "Cancel button" columns num = "3" @ cancel = "onarea cancel" @ change = "onarea change" @ confirm = "onarea confirm" / >

Using vant component area in Vue

Some props are described in detail on the official website:
Title: top column title
Area list: data of provinces and cities. See Table 1 for the format area.js file
Confirm button text: confirm button text, default to “OK”
Cancel button text: Cancel button text, default to “Cancel”
Columns num: display the number of columns, 3-province / City, 2-province / City, 1-province, 3 by default

Events description
Confirm: click the finish button at the top right to display an array parameter. See the specific format area.js data format
Cancel: when you click the Cancel button
Change: trigger when options change, picker instance, the value of all columns selected, and the index corresponding to the front row

Note: if you don’t need overseas data, you can delete itarea.jsInprovince_listOf900000: 'overseas'

4. Use in pop-up window

< van field type = "text" readonly required placeholder = "please select a region" clickable label = "address": value = "areavalue" @ Click = "openpop" / >
<van-popup v-model="showArea" position="bottom" :style="{height:'50%'}">
    <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="onAreaCancle" />
</van-popup>

onAreaConfirm(val) {
    this.showArea = false
    var addrInfo = val[0].name + '-' + val[1].name + '-' + val[2].name
    this.areaValue = addrInfo
}

Partial props description of component field
Type: input box type, optional value istel digit`number textarea passwordWait, defaulttext`
Readonly: read only
Required: whether to display the required asterisk in the form
Clickable: turn on click feedback
Label: the text on the left side of the input box

Recommended Today

Analysis of super comprehensive MySQL statement locking (Part 1)

A series of articles: Analysis of super comprehensive MySQL statement locking (Part 1) Analysis of super comprehensive MySQL statement locking (Part 2) Analysis of super comprehensive MySQL statement locking (Part 2) Preparation in advance Build a system to store heroes of the Three KingdomsheroTable: CREATE TABLE hero ( number INT, name VARCHAR(100), country varchar(100), PRIMARY […]