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>