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>