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>

 

 

来源：https://www.cnblogs.com/ting0527/p/11065879.html