一、安装插件
一定要进入项目根目录再下载
cnpm install v-distpicker --save
二、使用
在组件中使用三级联动插件
布局中:
当前位置<p><span @click="toAddress">{{city}}</span></p>
<!-- 三级联动插件-->
<v-distpicker type="mobile" @selected='selected' v-show="addInp">
</v-distpicker>
js:
<script>
import VDistpicker from '_v-distpicker@1.2.1@v-distpicker'
export default {
name: 'HomeHeader',
data () {
return {
//定义data数据
city:'全国',
addInp :false,
mask:false
}
},
components: {
VDistpicker
},
methods:{
//在methodes中定义方法
// 点击弹出三级联动
toAddress(){
console.log(111)
this.mask = true;
this.addInp = true;
},
// 省市区三级联动
selected(data){
this.mask =false;
this.addInp = false;
// this.city = data.province.value + ' ' + data.city.value +' ' + data.area.value
this.city = data.area.value
},
}
}
</script>