VUE，三级联动（省、市、区）插件！

以前写VUE三级联动都需要自己在网上复制粘贴修改一些代码，今天忽然发现了一个插件，十分简单快捷。

官网：https://www.awesomes.cn/repo/jcc/v-distpicker

使用步骤：

1.下载

      cnpm install v-distpicker --save

2.配置与引入

      在main.js中写： 

import Distpicker from 'v-distpicker'

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

    在你的需要用到该三级联动的页面的js中写：

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

3.在该页面的HTML部分写

<template>
  <div>
      <v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
  </div>
</template>

 

----------------------------------------------------如何获得他们的数据呢？-------------------------------------------------

1.我们要给html部分一个点击事件 <v-distpicker type="mobile" @selected='selected' v-show="addInp">

2.在vue配置里边用点击事件获取data:

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

        this.city=data.city.value

}

就大功告成了！