2019年 Vue 省市区联动方法，一秒生成，附带禁止页面跟随滚动效果

使用 npm 安装：

npm install v-distpicker --save

引入即可

import VDistpicker from 'v-distpicker'

详细代码如下，复制即可生成

<template>
    <div class="picker">
        <h3>配送至</h3>
        <li>
            <div class="left">
                <!--<span>所在地区</span>-->
            </div>
            <div class="right r">
                <div class="city" @click="toAddress">{{city}}</div>
                <i class="arrow-r"> </i>
            </div>
        </li>
        <v-distpicker class="font" type="mobile" @selected='selected' v-show="addInp">
        </v-distpicker>
        <div class="mask" v-show="mask"></div>
        <h4>现在付款，最快4月3日(周三)送达</h4>
    </div>
</template>

<script>
    import VDistpicker from 'v-distpicker'
    export default {
        name: "picker",
        components: { VDistpicker },
        data() {
            return{
                city:'请选择所在地址',
                addInp :false,
                mask:false
            }
        },
        methods: {
            toAddress() {
                this.mask = true;
                this.addInp = true;
                this.stop()
            },
            selected(data) {
                this.mask = false;
                this.addInp = false;
                this.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
                this. move()

            },
            stop(){
                document.body.style.overflow='hidden';
            },
            move(){
                document.body.style.overflow='';//出现滚动条
            },
        }
    }
</script>

<style scoped>
    .picker{
        width: 100%;
    }
    .left{
        font-size: 16px;
        color: black;
    }
    .right{
        font-size: 16px;
    }
    .picker >>>.distpicker-address-wrapper{
        font-size: 16px;
        color: black;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 222;
        width: 100%;
        background: rgba(000,000,000,.5);
    }

    .picker >>> .address-header{
        position: absolute;
        left: 0;
        top: 67%;
        z-index: 222;
        width: 100%;
        background: white;
    }
    .picker >>> .address-container {
        background-color: white;
        border-color: #e4e7ed;
        color: black;
        cursor: not-allowed;
        height: 5.1rem;
        overflow: auto;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 222;
        width: 100%;
    }
    h3{
        font-size: 16px;
        margin-top: 25px;
    }
    h4{
        font-size: 14px;
        color: #98989f;
        font-weight: 100;
    }
    .left span{
        margin-bottom: 8px;
    }
    .city{
        padding: 10px 0 0;
    }
</style>

样式和结构可以自己再设置，>>> 这个选择器是可以获取动太数据的Class名，只要自定义一个父元素
写法可参考上面