十分便捷的三級聯動插件
官網: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
}