v-distpicker地区选择器组件使用

1、参考文档：https://jcc.github.io/v-distpicker/

2、在vue中安装

npm install --save v-distpicker

3、在vue中引用

        局部引入方式：

import VDistpicker from 'v-distpicker'

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

         全局引入：在src目录下的main.js文件中添加引入代码

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

4、基础实现

<template>
  <div>

    <v-distpicker       
                        :province="form.province" 
                        :city="form.city" 
                        :area="form.area"
                        @province="vDistpickerHandle($event,'province')"
                        @city="vDistpickerHandle($event,'city')"
                        @area="vDistpickerHandle($event,'area')"
                        ></v-distpicker>
	</div>

</template>
<script>
// 引入地区选择


import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
  data(){
    return{
      form: {
        province: '',
        city: '',
        area: ''
      },
    }
 
  },
  methods:{
    vDistpickerHandle(event,value){
      console.log(event);
      console.log(event.value);
      this.form[value]=event.value
    },
  }
}

</script>

代码添加了一个vDistpickerHandle的事件处理函数对地区选择器中的数据进行处理，将数据存储到form对象的相应属性中，方便数据提交。