使用 npm 安装：

npm install v-distpicker --save

注册全局组件

import VDistpicker from 'v-distpicker'Vue.component('v-distpicker', VDistpicker);

注册组件

import VDistpicker from 'v-distpicker'

export default { components: { VDistpicker }}

基础

<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>

默认

<v-distpicker></v-distpicker>

移动端

<v-distpicker   type="mobile"></v-distpicker>

当然，默认样式是真的丑，我自己改了一下，感觉还行，效果图：

触发按钮

效果图

HTML

<!--省市区三级联动-->
<div class="divwrap" v-if="show">
  <v-distpicker type="mobile" @province="onChangeProvince1" @city="onChangeCity"
                @area="onChangeArea"></v-distpicker>
</div>
<!--遮罩层-->
<div class="blacks" v-if="show" @click="countermand"></div>
<!--触发选择-->
<div @click="choose">
  <span>请选择</span>
</div>

JS

 <script>
  import VDistpicker from 'v-distpicker';

  export default {
    components: {VDistpicker},
    name: "particular",
    data() {
      return {
        lxr: '',
        lxdh: '',
        show: false,
        //省市区
        province: '',
        city: '',
        area: ''
      }
    },
    props: ['ips'],
    methods: {
      //取消选择地区
      countermand: function () {
        this.show = false
      },
      //打开选择地区
      choose: function () {
        this.show = true;
      },
      onChangeProvince1: function (a) {
        this.province = a.value;
        if (a.value == '台湾省') {
          this.show = false;
        }
      },
      onChangeCity: function (a) {
        this.city = a.value;
      },
      onChangeArea: function (a) {
        this.area = a.value;
        this.show = false;
        this.city = this.province + this.city + this.area;
      }
    }
  }
</script>

CSS

<style scoped>
/*遮罩层*/
.blacks {
  position: fixed;
  width: 100%;
  height: 50%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
}
/*省市区三级联动*/
.divwrap {
  height: 50%;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
}

/*外部*/
.divwrap > .distpicker-address-wrapper {
  color: #0d0d0d;
  height: 100%;
}

/*头部*/
.divwrap >>> .address-header {
  background: #000;
  color: #fff;
  width: 100%;
  position: fixed;
  bottom: 50%;
  height: 0.5rem;
  font-size: 0.2rem;
}

/*头部内容*/
.divwrap >>> .address-header ul li {
  flex-grow: 1;
  text-align: center;
}

/*选择过省市区的头部*/
.divwrap >>> .address-header .active {
  color: #fff;
  border-bottom: 0.05rem solid #666;
}

/*内容部分*/
.divwrap >>> .address-container {
  overflow: scroll;
  height: 100%;
}

/*点过的地区内容*/
.divwrap >>> .address-container .active {
  color: red;
}
</style>

内容就这么多，希望能帮到大家！如果有更好的方法或者我哪里写的不对欢迎指正。

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。