本次專案中使用了V-Distpicker 外掛實現了省市區三級聯動

• V-Distpicker 專案文件地址
• V-Distpicker git地址

使用方法

npm install v-distpicker --save

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

實現思路

原文件中的並不是input觸發的 所以在觸發div上綁定了點選事件，在外掛元件上設定了 v-show 來控制外掛的顯示，當觸發外掛的selected事件（當選擇完後觸發）來使外掛的v-show為false隱藏，並把選中的值賦給div以此來顯示，為了美觀自己設定了一個遮罩層，自我感覺高大上了很多，哈哈哈

html部分

<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 type
 
="mobile" @selected='selected' v-show="addInp">
</v-distpicker>
<div class="mask" v-show="mask"></div>

js部分

//定義data資料
city:'請選擇',
addInp :false,
mask:false

//在methodes中定義方法
// 點選彈出三級聯動
    toAddress(){
        this.mask = true;
        this.addInp = true;
},
 // 省市區三級聯動
    selected(data){
        this
 
.mask =false;
        this.addInp = false;
        this.city = data.province.value + ' ' + data.city.value +' ' + data.area.value

},

專案實現效果圖

ok 搞定！

記錄點滴，每天進步一點點