十分便捷的三级联动插件
官网: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}