vue vant的Area 省市区选择使用

余温无痕

已于 2022-12-26 11:25:42 修改

阅读量1w

点赞数 3

分类专栏： vue js 文章标签： vue vant 地址选择省市区三级联动

于 2020-01-16 14:53:15 首次发布

本文链接：https://blog.csdn.net/u014678583/article/details/104004693

版权

js 同时被 2 个专栏收录

46 篇文章 2 订阅

订阅专栏

vue

40 篇文章 3 订阅

订阅专栏

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
        },
    }
}

希望能够帮助到大家!

vue微信登录：vue 微信登录(使用了vant)_余温无痕的博客-CSDN博客

vue+vant商品列表批量倒计时:vue+vant商品列表批量倒计时_余温无痕的博客-CSDN博客_vant 封装

vue获取微信地址并调用高德地图解析出详细地址：vue 获取微信定位经纬度，并调用高德地图解析出详细地址_余温无痕的博客-CSDN博客