Vue配合Vant使用时area省市区选择器的使用方式
作者:fighting Ably!
这篇文章主要介绍了Vue配合Vant使用时area省市区选择器的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
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: '内蒙古自治区', 。。。。。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。