Vue配合Vant使用时area 省市区 选择器使用
使用 原因
在开发的 过程中 ，所遇到的一个功能，我想用vant组件中的area地址选择器
在使用的过程中配合popup，默认popup不显示，当我点击触发时，从下方弹出popup组件
在P opup组件中可以将一 开始 配置的省市区进行选择
将选择的数据传递给 后端 ，这样的一个过程
最终得到的效果图
实现过程
3.1 HT ML 代码片
<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"
pos IT ion="bottom"
:style="{ h ei ght: '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="det ai lAddress"
rows="2"
ty PE ="textarea"
maxlength="100"
placeholder="请输入详细地址"
show-word-limit
/>
</van-cell-group>
</div>
3.2 js代码片
import addre SSD ata 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].n am e + '-' + 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 使用中会发现省市区选择器报错如下：
&nbs p; 3:5 error Identifier & # 39; PR ovince_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 */
e xp ort default {
province_list: {
110000: '北京市',
120000: '天津市',
130000: '河北省',
140000: '山西省',
150000: '内蒙古自治区',
。。。。。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的 文章 : vue vant Area组件使用详解 vue实现省市区的级联选择 在vue中使用vant TreeSelect分类选择组件操作
总结
以上是 为你收集整理的 Vue配合Vant使用时area省市区选择器的使用方式 全部内容，希望文章能够帮你解决 Vue配合Vant使用时area省市区选择器的使用方式 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Vue配合Vant使用时area省市区选择器的使用方式的详细内容...