vue中实现省市区三级联动(V-Distpicker插件)

野性酷女 2021-09-19 11:24 842阅读 0赞

本次项目中使用了V-Distpicker 插件实现了省市区三级联动

*  V-Distpicker [项目文档地址][Link 1]
 *  V-Distpicker [git地址][git]

使用方法

npm install v-distpicker --save

import VDistpicker from 'v-distpicker'

export default \{  
  components: \{ VDistpicker \}  
\}

实现思路  
原文档中的并不是input触发的 所以在触发div上绑定了点击事件，在插件组件上设置了 v-show 来控制插件的显示，当触发插件的selected事件（当选择完后触发）来使插件的v-show为false隐藏，并把选中的值赋给div以此来显示，为了美观自己设置了一个遮罩层，自我感觉高大上了很多，哈哈哈

html部分

js部分

//定义data数据  
city:'请选择',  
addInp :false,  
mask:false

//在methodes中定义方法  
// 点击弹出三级联动  
    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

\},

项目实现效果图

![这里写图片描述][70]

ok 搞定！  
\---------------------   
作者：dong-v   
来源：CSDN   
原文：https://blog.csdn.net/weixin\_42018790/article/details/80928420   
版权声明：本文为博主原创文章，转载请附上博文链接！

[Link 1]: https://distpicker.uine.org/
[git]: https://github.com/jcc/v-distpicker
[70]: /images/20210725/d487bfc18b7a443c834862c57006f2b0.png