vue項目的省市三級聯動

1.安裝插件

npm install v-distpicker --save

2.在需要引入聯動的組件中引入並使用

<!--省市三級聯動-->
<div class="liandong">
  <div class="city" @click="toAddress">{{city}}</div>
  <v-distpicker type="mobile" @selected='selected' v-show="addInp" style="width: 300px">
  </v-distpicker>
  <div class="mask" v-show="mask"></div>
</div>

<script>
  import VDistpicker from 'v-distpicker'
export default {
  name: 'join_page',
  components: { VDistpicker },
  data () {
    return {
      city:'請選擇地區',
      addInp :false,
      mask:false
    }
  },
  methods: {
// 點擊彈出三級聯動
    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
    }
  }
}
</script>