三级级联选择器，用于选择一个地区（省、市、区）

一个v-distpicker组件。该组件用于显示一个三级级联选择器，用于选择一个地区（省、市、区）。

具体代码

首先要先安装依赖

npm install v-distpicker --save

<template>
  <div>
    <div>
      <v-distpicker
        class="distpicker"
        :province="receiverInfo.receiverProvince"
        :city="receiverInfo.receiverCity"
        :area="receiverInfo.receiverRegion"
        @selected="onSelectRegion"
      ></v-distpicker>
    </div>
  </div>
</template>

<script>
import VDistpicker from 'v-distpicker'

export default {
  name: 'ExerciseHomeView',
  components: {
    VDistpicker,
  },
  data() {
    return {
      receiverInfo: {
        receiverProvince: null,
        receiverCity: null,
        receiverRegion: null,
      },
    }
  },

  mounted() {},

  methods: {
    onSelectRegion(data) {
      this.receiverInfo.receiverProvince = data.province.value
      this.receiverInfo.receiverCity = data.city.value
      this.receiverInfo.receiverRegion = data.area.value
    },
  },
}
</script>

<style lang="scss" scoped></style>

这样就可以实现一个三级联动地区组件

模板包含一个div容器，其中嵌套了另一个div，其中包含了v-distpicker组件。

在v-distpicker组件中：

• :province、:city和:area绑定将receiverInfo.receiverProvince、receiverInfo.receiverCity和receiverInfo.receiverRegion的值传递给组件。这些属性用于在distpicker组件中预选地区值。

• @selected="onSelectRegion"事件监听器在distpicker组件中选择地区时触发onSelectRegion方法。

在script部分：

• VDistpicker组件被导入并在当前组件中注册为一个组件。

• data函数返回一个包含receiverInfo属性的对象，该属性包含所选地区的值。

• onSelectRegion方法用于处理distpicker组件中地区的选择。它将所选的地区值更新到receiverInfo属性中。

另外还可以在官方仓库里下载源码里面有多种样式的选择地区的样式，可根据实际情况进行使用！