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

Libp2p RS version 0.3.0 introduction

V0.3.0 released on 4.23, usingAsyncRead & AsyncWriteTo replace ourReadEx & WriteEx & SplitEx; SimplifiedKad/DHTImplementation logic. modify ReadEx & WriteEx & SplitEx: At first we tried to useasync-traitTo define their own IO operationsTraitFor more pure useasync/awaitTo write code. withReadExFor example, it is roughly as follows: #[async_trait] pub trait ReadEx { async fn read(&mut self, buf: &mut […]