Vue配合Vant使用時area省市區(qū)選擇器的使用方式

更新時間：2023年01月18日 09:25:43 作者：fighting Ably!

這篇文章主要介紹了Vue配合Vant使用時area省市區(qū)選擇器的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue配合Vant使用時area省市區(qū)選擇器使用

使用原因

在開發(fā)的過程中，所遇到的一個功能，我想用vant組件中的area地址選擇器

在使用的過程中配合popup，默認(rèn)popup不顯示，當(dāng)我點擊觸發(fā)時，從下方彈出popup組件

在popup組件中可以將一開始配置的省市區(qū)進(jìn)行選擇

將選擇的數(shù)據(jù)傳遞給后端，這樣的一個過程

最終得到的效果圖

默認(rèn)狀態(tài)

點擊后選擇狀態(tài)

選擇成功后的狀態(tài)

實現(xiàn)過程

3.1 HTML代碼片

<div class="school-address">
      <van-cell is-link @click="showPopup" v-model="showAddr">
        校區(qū)地址
        <span class="showAddr">{{showAddr}}</span>
      </van-cell>
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '50%' ,padding:'16px'}"
      >
        <van-area
          :area-list="areaList"
          :columns-placeholder="['請選擇', '請選擇', '請選擇']"
          value="110000"
          title="選擇地址"
          @change="changeAddr"
          @cancel="cancelChoose"
          @confirm="chooseThis"
        />
      </van-popup>
      <van-cell-group>
        <van-field
          v-model="detailAddress"
          rows="2"
          type="textarea"
          maxlength="100"
          placeholder="請輸入詳細(xì)地址"
          show-word-limit
        />
      </van-cell-group>
    </div>

3.2 js代碼片

import addressData from './../data/address'

export default {
    data () {
      return {
        show: false,  //是否顯示彈出層
        detailAddress: '',  //綁定詳細(xì)地址輸入框
        areaList: addressData, //可選地址數(shù)據(jù)列表
        showAddr: '',      //顯示校區(qū)地址
        resAddr: '',       //傳給后端的位置信息
      }
    },
    methods:{
    	//控制popup組件的彈出和隱藏
         showPopup () {
        	this.show = true
      	},
       //改變地址選擇，當(dāng)切換省市區(qū)時進(jìn)行數(shù)據(jù)留存
      changeAddr (picker) {
        //value=0改變省，1改變市，2改變區(qū)
        let val = picker.getValues()
        this.resAddr = val
      },
       //選好地址后點擊確定
      chooseThis () {
        this.show = false
        //選中地址成功后回顯
        this.showAddr = this.resAddr[0].name + '-' + this.resAddr[1].name + '-' + this.resAddr[2].name
        console.log(this.resAddr, '即將傳給后端的省市區(qū)信息')
      },
    }
  }

在這里需要注意的是

剛剛在使用的過程中，我只定義了@confirm事件和@cancel事件

所以每次選中后，我都沒有辦法獲取到其中的值

后來增加了@change事件，可以在每一次數(shù)據(jù)發(fā)生變化的時候進(jìn)行賦值，從而取到我想要的code值

vue3.0 cli vant省市區(qū)選擇器用不了問題

vue3.0 cli + vant + eslint 使用中會發(fā)現(xiàn)省市區(qū)選擇器報錯如下：

3:5 error Identifier 'province_list' is not in camel case @typescript-eslint/camelcase 40:5 error Identifier 'city_list' is not in camel case @typescript-eslint/camelcase 654:5 error Identifier 'county_list' is not in camel case @typescript-eslint/camelcase

這個原因是eslint報出來三個命名方式不是駝峰式造成的。要處理這個的方式只能在我們的Area.js文件（也就是數(shù)據(jù)格式的文件）頂部加入 /* eslint-disable */（此js文件不用eslint規(guī)范）：形成代碼如下：

/* eslint-disable */?
export default {
? ? province_list: {
? ? ? 110000: '北京市',
? ? ? 120000: '天津市',
? ? ? 130000: '河北省',
? ? ? 140000: '山西省',
? ? ? 150000: '內(nèi)蒙古自治區(qū)',
? ? ? 。。。。。