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部分
<v-distpicker hide-area @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
加上province-disabled省级别不能动
<v-distpicker hide-area @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" province-disabled ></v-distpicker>
city-disabled市级别不能动
<v-distpicker hide-area @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" city-disabled></v-distpicker>
area-disabled区域级别不能动
<v-distpicker hide-area @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" area-disabled></v-distpicker>
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;
}
