vue使用省市区三级联动(V-Distpicker插件)

关注

原创最新推荐文章于 2026-04-12 20:58:32 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

城市选择插件 V-Distpicker的简单使用给插件绑定参数，因为在data里已经定义了参数，所以调用的时候注意自己定义的参数是什么。这个插件好像只能在 vue项目中使用，看大佬们是这样说的。完事了，因为使用的场景比较简单，所以也只能提供这点内容。说一下我在项目中的使用，因为比较简单可能和大家的不一样。data就是选中的数据，不清楚的可以打印出来查看一下。在 components 里注册插件。设置选择的方法，然后获取数据存入本地。changeAddress方法。先在vue项目中下载。阅读详情

一、安装插件
一定要进入项目根目录再下载

cnpm install v-distpicker --save

二、使用
在组件中使用三级联动插件
布局中：

当前位置<p><span  @click="toAddress">{{city}}</span></p>
<!-- 三级联动插件-->
<v-distpicker type="mobile" @selected='selected' v-show="addInp">
</v-distpicker>

js：

<script>
  import VDistpicker from '_v-distpicker@1.2.1@v-distpicker'
    export default {
      name: 'HomeHeader',
      data () {
        return {
          //定义data数据
          city:'全国',
          addInp :false,
          mask:false
        }
      },
      components: { 
            VDistpicker
       },
      methods:{
        //在methodes中定义方法
       // 点击弹出三级联动
        toAddress(){
          console.log(111)
          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
          this.city =  data.area.value
        },
      }
    }
</script>

收录于