vue项目的省市三级联动

最新推荐文章于 2023-10-24 14:23:02 发布

转载最新推荐文章于 2023-10-24 14:23:02 发布 · 239 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ting0527/p/11065879.html

文章标签：

#javascript #ViewUI

博客介绍了v-distpicker插件的安装与使用。通过npm install v-distpicker --save命令进行安装，还需在需要引入联动的组件中引入并使用，内容转载自相关博客。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>