效果圖

需要引入 大佬寫的js 以及 css 原始檔裡面有大佬的地址

這是我存在gitee上的檔案

https://gitee.com/depressiom/address-pickview-effect.git

<div class="weui-cells" style="margin: 0px;line-height: 60px;">
            <div class="weui-cell weui-cell_select weui-cell_select-after clo_l">
                <div class="weui-cell__hd">
                    <label  class="weui-label clo_title">省/市/區</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input clo_text" pattern="" type="text" @click="selectArea" id="selectArea" name="city" placeholder="請輸入所在地區" v-model="areas" readonly>
                </div>
            </div>
        </div>
 

  // 選擇地址
            selectArea(){
                // 地址三級聯動
                weui.picker(cityData3, {
                    //設定預設展示程式碼
                    defaultValue: ["110000", "110100", "110101"],
                    // 點選確定後
                    onConfirm: function (result) {
                        var str = "";
                        var cityArr = [];
                        result.map(function (i, val) {
                            str += i["label"] + ' '; // 獲取文字
                            cityArr.push(i["value"]);
                        });
                        $("#selectArea").val(str);
                        areas = str ;
                        provinceCode = cityArr[0]; // 省級程式碼
                        cityCode = cityArr[1];  // 市級程式碼
                        areaCode = cityArr[2];  // 區縣程式碼
                        $("#selectArea").attr("cityArr", cityArr);
                    }
                })
            },
 

很多時候都是站在巨人的肩膀上，很感謝搜尋引擎上面的各種大佬 疑難解答