vue vant的Area 省市区选择使用

1、引入省市区跟弹出层组件

 

2、在src文件下重新新建个common文件,新建area.js,里面放入area.json数据,完整的数据area.json

3、在页面中调用

<template>
    <div>
        
            <van-field readonly required clickable label="选择地区" :value="valueArea" placeholder="请选择所在地区" @click="bindShow" />

        <!--选择省市区-->
        <van-popup v-model="showArea" position="bottom" :style="{ height: '40%' }">
            <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="bindCancel" />
        </van-popup>

       
    </div>
</template>

4、js

import AeraInfo from "../common/area.js";
export default {
    data() {
        return {
            areaList: AeraInfo, //引用地区信息
            showArea: false,
            valueArea: '', //地区值
            arrArea: [], //存放地区数组
        }
    },
    methods: {
        bindShow(){
            this.showArea= true;
        },
        bindCancel(){
            this.showArea= false;
        },
        //地区选择
        onAreaConfirm(val) {
            this.showArea = false;
            this.arrArea = val;
            var addrInfo = val[0].name + '-' + val[1].name + '-' + val[2].name;
            this.valueArea = addrInfo
        },
    }
}

 

希望能够帮助到大家

发布了6 篇原创文章 · 获赞 0 · 访问量 245
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览