省市区三级联动插件(v-distpicker)

安装:

npm install v-distpicker --save //npm安装

全局注册:

//全局注册
import Distpicker from 'v-distpicker'
Vue.component('v-distpicker', Distpicker)

局部注册:

//局部注册
import VDistpicker  from 'v-distpicker'
export default { components: { VDistpicker }}

基础:

//基础
<v-distpicker></v-distpicker>

默认选中:

//默认选中 浙江省杭州市西湖区
<v-distpicker province="浙江省" city="杭州市" area="西湖区"></v-distpicker>

移动端:

//移动端
<v-distpicker type="mobile"></v-distpicker>

获取选中的数据:

//获取选中的数据
<v-distpicker @selected="selected"></v-distpicker>
export default {
    methods:{
		selected(data){
          this.province = data.province.value;
          this.city = data.city.value;
          this.area = data.area.value;
          console.log(this.province,this.city,this.area);
        },
    },
},

猜你喜欢

转载自blog.csdn.net/weixin_55992854/article/details/120055377