v-distpicker地区选择器组件使用实例详解
作者：涛声依在
代码添加了一个vDistpickerHandle的事件处理函数对地区选择器中的数据进行处理,将数据存储到form对象的相应属性中,方便数据提交,这篇文章主要介绍了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对象的相应属性中，方便数据提交。
到此这篇关于v-distpicker地区选择器组件使用的文章就介绍到这了,更多相关v-distpicker地区选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！