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: '内蒙古自治区',
      。。。。。

总结

作者:fighting Ably!原文地址:https://blog.csdn.net/weixin_44593720/article/details/103869992

%s 个评论

要回复文章请先登录注册