vue 省市區三級聯動插件v-distpicker

十分便捷的三級聯動插件

官網：https://www.awesomes.cn/repo/...

步驟1：下載

npm install v-distpicker --save

Or

yarn add v-distpicker --save

步驟2：使用與引入
① 在main.js中註冊全局組件

import Distpicker from 'v-distpicker'

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

② 在.vue文件中使用組件（你須要用到三級聯動的.vue頁面的js裏）

import VDistpicker from 'v-distpicker'
 
export default {
  components: { VDistpicker }
}

③ 如何使用組件<v-distpicker></v-distpicker>（在該.vue文件的html部分寫）

<template>
  <div>
      <v-distpicker province="廣東省" city="廣州市" area="海珠區"></v-distpicker>
  </div>
</template>

移動端Mobile

<v-distpicker type="mobile"></v-distpicker>

步驟3：如何獲取他們的數據
① 給html部分一個點擊事件

<v-distpicker @selected='selected'></v-distpicker>

② 在vue配置方法裏邊用點擊事件獲取data:

selected(data){
 
    this.province = data.province.value

    this.city = data.city.value

}