v-distpicker的简单安装和使用 — 一款地区选择插件

1.安装

（1）进入到对应的vue项目目录中，打开终端

（2）输入安装指令

• npm install v-distpicker --save
  

2.引用方式(二选一)

(1)在main.js中引入

• import VDistpicker from 'v-distpicker';//引入v-distpicker
  Vue.component('v-distpicker',VDistpicker);//全局注册v-distpicker
  

(2)在想要用的.vue文件中引用

• import VDistpicker from 'v-distpicker';//引入v-distpicker
  export default{components:{VDistpicker//注册组件}data(){return {}}
  }
  

3.使用方式

(1)一般模式

• <v-distpicker></v-distpicker>
  

(2)有默认值模式

• <v-distpicker province="广东省"city="茂名市"area="茂南区">
  </v-distpicker>
  

(3)正常应用模式

• <v-distpicker @province="provinceChange" province="广东省"@city="cityChange" city="茂名市"@area="areaChange" area="茂南区">
  </v-distpicker>export default{data(){return {data:[]//从接口获取到的数据}},methods:{//三个选择框的值改变事件，data参数：返回选择框改变时候的值，是一个对象provinceChange(data){//省this.data['merchantProvince'] = data.value},cityChange(){//市this.data['merchantCity'] = data.value},areaChange(){//区、县this.data['merchantTown'] = data.value}}
  }
  

(4)移动端

• 加上type=“mobile”

• <v-distpicker type='mobile'></v-distpicker>
  

4.出现问题

• 在main.js引入的时候，会提示如图所示的问题，但是是可以正常使用的。

​