vue实现省市区三级联动地区选择

梅米儿

于 2020-01-11 11:42:20 发布

阅读量2.7k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_41625322/article/details/103934932

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在Vue项目中实现一个地址选择器组件，包括使用v-distpicker库进行省市区三级联动的选择，并通过点击事件展示和隐藏选择框，以及如何获取用户选择的地址数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

实现步骤

1.

npm i v-distpicker --s

2.

<template>
    <div>
        <div class="choos" @click="choos" v-if="agentArea==''">选择</div>
        <div class="choos" @click="choos"  v-if="agentArea!=''">{{agentArea}}</div>
        <div class="address" v-show="popupVisible" style="height:5rem;position: fixed;width:100%;bottom:0;left:0">
            <v-distpicker class="picker" type="mobile" @selected='selected' style="height:100%;">
            </v-distpicker>
        </div>
    </div>
</template>

<script>
    import vDistpicker from 'v-distpicker';
    export default {
        components:{
            vDistpicker
        },
        data () {
            return {
                agentArea:'',
                popupVisible:false
            }
        },
        watch: {
        },
        created () {
        },
        methods: {
            choos(){
                this.popupVisible=true
            },
            selected(data){
                console.log(data);
                this.popupVisible = false;
                this.agentArea = data.province.value + data.city.value + data.area.value
            }
        }
    }
</script>

<style>

    .distpicker-address-wrapper .address-container{
        height:4.2rem;overflow: scroll;
    }

    .distpicker-address-wrapper .address-header{
        height:0.8rem;
    }

</style>