uniapp-省市区三级联动选择器-复制直接用

问题：uniapp提供的picker的mode = region无法使用；（1.地区不全；2.没有区的选择时，无法获取值；） picker | uni-app官网 (dcloud.net.cn)

解决办法：用picker-view写选择器(含地区的JS代码)

<view class="choice">
    <view>所在地区</view>
    <view class="ipt-box">
        <input @click="isShowPicker=true" :value="address" class="ipt" type="text" placeholder="请选择省市区"/>
    </view>
</view>

//选择器+遮罩层
<view class="mask" v-if="isShowPicker" @click="isShowPicker=false">
    <view class="picker-box">
        <view class="btn">
            <view @click="isShowPicker = false">取消</view>
            <view class="txt" @click="certain">确定</view>
        </view>
        <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
            <picker-view-column>
                <view class="item" v-for="(item,index) in myProvinces" :key="index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in myCity" :key="index">{{item}}</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in myAreas" :key="index">{{item}}</view>
            </picker-view-column>
        </picker-view>
    </view>
</view>

.choice{
    margin-left: 20rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.ipt-box{
    margin-left: 20rpx;
    border: 2rpx solid #d6d6d6;
    border-radius: 10rpx;
}
.ipt{
    margin-left: 20rpx;
    width: 500rpx;
}

// 选择器
.picker-box {
    background-color: #f9f9f9;
    z-index: 99;
    position: fixed;
    bottom: 0;

    .btn {
        display: flex;
        justify-content: space-between;
        margin: 10rpx 20rpx 0 20rpx;
        color: #606266;

        .txt {
            color: #2979ff;
        }
    }

    .picker-view {
        width: 750rpx;
        height: 600rpx;
        margin-top: 20rpx;
    }

    .item {
        line-height: 100rpx;
        text-align: center;
    }
}

// 遮罩层
.mask{
    position: fixed;
    top:0;
    left:0;
    z-index:999;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
}

<script>
import {getProvinces,getMyCity,getAreas} from '@/utils/area.js'
    export default{
        data(){
            address:'',
            isShowPicker: false,
            provinces: [],
            city: [],
            areas: [],
            myProvinces: '',
            myCity: '',
            myAreas: '',
            value: [0, 0, 0],
            indicatorStyle: `height: 50px;`,
        },
        onLoad() {
            const that = this
            const that = this
            that.provinces = getProvinces()
            that.city = getMyCity(0)
            that.areas = getAreas(0, 0)
        },
        methods:{
            // 所在地区确认按钮
            certain() {
                const that = this
                const val = JSON.parse(JSON.stringify(that.value))
                if (val.toString() == [0, 0, 0]) {
                   that.pickerChoiceValue(val)
                }
            },
            // 所在地区滚动选择
            bindChange(e) {
                const that = this
                that.value = e.detail.value
                that.pickerChoiceValue(that.val)
            },
            pickerChoiceValue(val){
                const that = this
                that.myProvinces = that.provinces[val[0]]
                that.city = getMyCity(val[0])
                that.myCity = that.city[val[1]]
                that.areas = getAreas(val[0], val[1])
                that.myAreas = that.areas[val[2]]
                that.address = that.myProvinces + that.myCity + that.myAreas
            },
        }
        
    }
</script>

地区的JS代码，getProvinces,getMyCity,getAreas方法(直接复制使用)：

补充：
1.用uniapp的picker多列选择器mode = multiSelector也可以；不过数据格式不同；
2.这个掘金的代码片段使用可以控制只要Script的代码吗？有懂的可以说说吗？
3.有问题或建议希望可以指出谢谢；