<template>
<div>
<nav-bar :if_left_arrow="true" title="省市区选择"></nav-bar>
<div @click="city_show = true">
<label for="">地址选择</label>
<input type="text" placeholder="请选择地址" v-model="address" readonly onfocus="this.blur();">
</div>
<!--可以通过columns-num属性配置省市区显示的列数,默认情况下会显示省市区,当你设置为2,则只会显示省市选择-->
<van-area
:area-list="areaList"
:columns-placeholder="['请选择', '请选择', '请选择']"
title="选择城市"
:columns-num="3"
@cancel="cancel"
@confirm="confirm" />
</div>
</template>
<script>
import areaList from '@/common/js/area.js'//本地地区数据
export default {
data() {
return {
areaList,//地区数据
city_show :false,//地区弹出
address:'',//选中的地区名称
address_code:'',//选中的地区code
}
},
methods: {
//选择城市弹窗,取消
cancel(){
this.cityFlag = false;
},
//,确定,赋值到input框
confirm(val){
this.city_show = false;
this.address = val[0].name + "-" + val[1].name + "-" + val[2].name;
this.address_code = val[2].code;
},
},
}
</script>
3、关于地区选择:Area 省市区选择
最新推荐文章于 2024-02-02 15:01:33 发布