效果图

实现步骤

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>