Vue实现省市区三级选择
作者:互联网
一、安装v-distpicker:
npm i v-distpicker --s
二、使用v-distpicker:
1、首先在script中导入:
import vDistpicker from 'v-distpicker';
2、使用组件:
①在<template>中:
<div>
<v-distpicker class="picker" @selected='selected'></v-distpicker>
</div>
②在<script>中:
components:{
vDistpicker
},
③获取选择到的省市区:
data () {
return {
area:'',//省市区三级
}
},
methods: {
selected(data){
this.area= data.province.value + data.city.value + data.area.value;
}
}
④在页面中输出:
<div v-if="area!=''">{{area}}</div>
标签:Vue,area,distpicker,value,vDistpicker,省市区,data,三级 来源: https://blog.csdn.net/qq_44660042/article/details/120317287