V-Distpicker 插件实现了省市区三级联动vue

https://distpicker.pigjian.com/ 官网

npm install v-distpicker --save

main.js里面引入

importVDistpicker from'v-distpicker'

Vue.component('v-distpicker',VDistpicker)

demo.vue使用

importVDistpicker from'v-distpicker'

exportdefault{components:{VDistpicker}}

methods: {

//省级

  onChangeProvince(a){

this.province=a.code

    console.log(this.province)

},

  // 市级别

  onChangeCity(a){

this.city=a.code

    console.log(a.code)

},

  // 区域级别

  onChangeArea(a){

this.area=a.code

    console.log(a.code)

},

  // 查询按钮

  querycx(){

console.log(this.province)

console.log(this.city)

},

div部分

加上province-disabled省级别不能动

city-disabled市级别不能动

area-disabled区域级别不能动

style部分

/*VDistpicker的样式*/

.divwrap{

height:400px;

  overflow-y:auto;

  position:fixed;

  left:0;

  bottom:0;

  width:100%;

}

.divwrap>>>.distpicker-address-wrapper{

color:#999;

}

.divwrap>>>.address-header{

position:fixed;

  bottom:400px;

  width:100%;

  background:#000;

  color:#fff;

}

.divwrap>>>.address-header ul li{

flex-grow:1;

  text-align:center;

}

.divwrap>>>.address-header .active{

color:#fff;

  border-bottom:#666 solid 8px

}

.divwrap>>>.address-container .active{

color:#000;

}