VUE-地區選擇器(V-Distpicker)組件使用

安裝，引用，這些直接從官網拷貝來的，就很少說了。
一、安裝
使用 npm 安裝：

npm install v-distpicker --save
使用 yarn 安裝

yarn add v-distpicker --save
二、使用

註冊組件 註冊全局組件 import VDistpicker from 'v-distpicker' Vue.component('v-distpicker', VDistpicker); 註冊組件 import VDistpicker from 'v-distpicker' export default { components: { VDistpicker } } 簡單使用 基礎 <v-distpicker></v-distpicker>
默認值 <v-distpicker province="廣東省" city="廣州市" area="海珠區"></v-distpicker>
移動端 <v-distpicker type="mobile"></v-distpicker>

 

三、下面是重點

 1 獲取選擇的值  2  
 3 <template>
 4     <button  @click="choose">點我選擇區域</button>
 5     <div class="divwrap" v-if="show">
 6         <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
 7     </div>
 8 </template>
 9  
10 在你引用 v-distpicker 的父組件裏面定義幾個方法來獲取選擇的值。 11  
12 <script>
13     import VDistpicker from 'v-distpicker'
14     export default { 15         name: 'getAddress', 16  components: { VDistpicker }, 17  data() { 18             return { 19                 show:false, 20  } 21  }, 22  methods: { 23  choose(){ 24                 this.show=!this.show 25  }, 26  onChangeProvince(a){ 27  console.log(a) 28  }, 29  onChangeCity(a){ 30  console.log(a) 31  }, 32  onChangeArea(a){ 33  console.log(a) 34                 this.show=false
35  } 36  }, 37 } 38  
39  
40  
41 **四、樣式**
42 你是否是感受彈出的樣式很醜？ 43 OK，下面來改改樣式 44 <style scoped>
45  .divwrap{ 46  height: 400px; 47         overflow-y: auto; 48  position: fixed; 49         left: 0; 50         bottom: 0; 51         width: 100%; 52  } 53     .divwrap>>>.distpicker-address-wrapper{ 54         color: #999; 55  } 56     .divwrap>>>.address-header{ 57  position: fixed; 58  bottom: 400px; 59         width: 100%; 60         background: #000; 61  color:#fff; 62  } 63     .divwrap>>>.address-header ul li{ 64         flex-grow: 1; 65         text-align: center; 66  } 67     .divwrap>>>.address-header .active{ 68  color: #fff; 69         border-bottom:#666 solid 8px 70  } 71     .divwrap>>>.address-container .active{ 72         color: #000; 73  } 74  
75 </style>