https://distpicker.pigjian.com/?官網(wǎng)
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: {
//省級(jí)
? onChangeProvince(a){
this.province=a.code
? ? console.log(this.province)
},
? // 市級(jí)別
? onChangeCity(a){
this.city=a.code
? ? console.log(a.code)
},
? // 區(qū)域級(jí)別
? 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省級(jí)別不能動(dòng)
<v-distpicker hide-area @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" province-disabled ></v-distpicker>
city-disabled市級(jí)別不能動(dòng)
<v-distpicker hide-area @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea" city-disabled></v-distpicker>
area-disabled區(qū)域級(jí)別不能動(dòng)
<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;
}
