Using vant component area in Vue


1. Download the official area data file,
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" />

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 […]