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引入的时候，会提示如图所示的问题，但是是可以正常使用的。

​

本文转自 https://blog.csdn.net/weixin_46801609/article/details/109609143，如有侵权，请联系删除。