Vue配合Vant使用时area省市区选择器的使用方式

目录@H_406_2@

• Vue配合Vant使用时area省市区选择器使用
• 使用原因
• 最终得到的效果图
• 实现过程
• 在这里需要注意的是
• vue3.0 cli vant省市区选择器用不了问题
• 总结

Vue配合Vant使用时area省市区选择器使用

使用原因

在开发的过程中，所遇到的一个功能，我想用vant组件中的area地址选择器

在使用的过程中配合popup，默认popup不显示，当我点击触发时，从下方弹出popup组件

在Popup组件中可以将一开始配置的省市区进行选择

将选择的数据传递给后端，这样的一个过程

最终得到的效果图

实现过程

3.1 HTML代码片

div class="school-address">
          van-cell is-link @click="showPopup" v-model="showAddr">
            校区地址        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="请输入详细地址"          show-word-limit        />
          /van-cell-group>
        /div>
    

3.2 js代码片

import addreSSData From './../data/address'export default {
    data () {
      return {
        show: false,  //是否显示弹出层        detailAddress: '',  //绑定详细地址输入框        areaList: addressData, //可选地址数据列表        showAddr: '',      //显示校区地址        resAddr: '',       //传给后端的位置信息      }
    }
,    methods:{
    	//控制popup组件的弹出和隐藏         showPopup () {
        	this.show = true      	}
,       //改变地址选择，当切换省市区时进行数据留存      changeAddr (picker) {
        //value=0改变省，1改变市，2改变区        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, '即将传给后端的省市区信息')      }
,    }
  }
    

在这里需要注意的是

刚刚在使用的过程中，我只定义了@confirm事件和@cancel事件

所以每次选中后，我都没有办法获取到其中的值

后来增加了@change事件，可以在每一次数据发生变化的时候进行赋值，从而取到我想要的code值

vue3.0 cli vant省市区选择器用不了问题

vue3.0 cli + vant + eslint 使用中会发现省市区选择器报错如下：

 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文件（也就是数据格式的文件）顶部加入 /* eslint-disable */（此js文件不用eslint规范）：形成代码如下：

/* eslint-disable */ export default {
    province_list: {
          110000: '北京市',      120000: '天津市',      130000: '河北省',      140000: '山西省',      150000: '内蒙古自治区',      。。。。。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• vue vant Area组件使用详解
• vue实现省市区的级联选择
• 在vue中使用vant TreeSelect分类选择组件操作

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！