1.组件 address.vue

<template>
  <div>
    <div class="addresSelectVal">
      <ul>
        <li
          v-for="(item,index) of addressVal"
          :key="index"
          :class="{'select':addressIndex == index}"
          @click="selectType(index)"
        >{{item.name}}</li>
        <li
          :class="{'select':selectState == addressIndex}"
          v-show="selectState < length || selectState >= length &&selectState < 3 && !force"
          @click="selectType(selectState)"
        >请选择</li>
      </ul>
    </div>
    <div class="addresBox" ref="scroll">
      <ul>
        <li
          v-for="(item,index) of addressList"
          :key="index"
          :class="{'select':addressVal.length > addressIndex && item.objId == addressVal[addressIndex].objId}"
          @click="selectClick(item)"
        >{{item.name}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    //选中数据
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    //联动长度[省，市，区]
    length: {
      type: Number,
      default() {
        return 3;
      }
    },
    //是否强制选择,如果length=2,force = false 选择到市的时候就可以确定了，但是还可以选择到区
    force: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  created() {
    if (this.data instanceof Array) {
      this.addressVal = this.data;
      this.selectState = this.data.length;
    }
  },
  watch: {
    data(val) {
      this.addressVal = val;
      this.selectState = val.length;
    }
  },
  data() {
    return {
      //选出的值
      addressVal: [],
      //当前选择
      addressIndex: 0,
      //选择的值
      addressList: [],
      //请选择的显示
      selectState: 0
    };
  },
  methods: {
    getRegion(uid) {
      //请求数据
      this.$ajax("kemean/aid/region", { uid: uid }, { load: false }).then(
        data => {
          if (data.length > 0) {
            this.addressList = data;
            this.$refs.scroll.scrollTop = "0px";
          } else {
            this.$emit("change", this.addressVal);
          }
        }
      );
    },
    //切换对应的类型
    selectType(index) {
      this.addressIndex = index;
      var len = this.addressVal.length;
      if (index == 0) {
        this.getRegion(0);
      } else {
        this.getRegion(this.addressVal[index - 1].objId);
      }
      if (len == this.length) {
        this.selectState = this.length;
      } else if (len == this.length && index == this.length && this.force) {
        this.selectState = index;
      } else {
        this.selectState = index + 1;
      }
    },
    //选择
    selectClick(item) {
      if (this.addressIndex == 0) {
        this.addressVal = [];
      } else {
        this.addressVal.splice(this.addressIndex, this.addressVal.length - 1);
      }
      this.addressVal.push(item);
      if (
        this.addressVal.length < this.length ||
        (this.addressVal.length < 3 && !this.force)
      ) {
        this.getRegion(item.objId);
        this.addressIndex++;
      }
      if (this.addressVal.length >= this.length) {
        this.$emit("change", this.addressVal);
      }
      this.selectState = this.addressVal.length;
    }
  },
  mounted() {
    this.getRegion(0);
  }
};
</script>
<style lang="scss" scoped>
@import "src/style/mixin";
.addresSelectVal {
  padding: 0px vw(10);
  border-bottom: 1px solid #ebebeb;
  box-sizing: border-box;
  background-color: #fff;
}
.addresSelectVal ul {
  display: flex;
  flex-wrap: wrap;
}
.addresSelectVal ul li {
  margin-left: vw(20);
  padding: 0px vw(10);
  height: vw(72);
  line-height: vw(72);
  border-bottom: 2px solid #fff;
  box-sizing: border-box;
  font-size: vw(28);
}
.addresSelectVal ul li:first-child {
  margin-left: 0px;
}
.addresSelectVal ul li.select {
  border-bottom: 2px solid $mainColor;
  color: $mainColor;
}
.addresBox {
  padding: 0px vw(20);
  height: vw(420);
  overflow-y: auto;
  background-color: #fff;
}
.addresBox ul li {
  height: vw(72);
  line-height: vw(72);
  font-size: vw(28);
}
.addresBox ul li.select {
  color: $mainColor;
}
</style>

使用方法

//引入
import zAddress from "./address.vue";
components: {
    zAddress 
},
//组件
<z-address v-model="addressPopupShow" :data="selectAddressData" :length="2" :force="true" @change="addressChange"></z-address>

2.和popup弹窗结合使用 address.vue

popup组件地址：https://blog.csdn.net/weixin_40614372/article/details/91589824

<template>
  <popup v-model="currentValue">
    <div class="addresTitle">
      <span @click="currentValue = false">取消</span>
      <p>所在地区</p>
      <span @click="onConfirm">确定</span>
    </div>
    <z-address :data="addressVal" @change="addressChange" :length="length" :force="false"></z-address>
  </popup>
</template>
<script>
import Popup from "./popup.vue";
import zAddress from "./address.vue";
export default {
  components: {
    Popup,
    zAddress
  },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    value: {
      type: Boolean,
      default: false
    },
    length: {
      type: Number,
      default: 2
    }
  },
  created() {
    if (typeof this.value !== "undefined") {
      this.currentValue = this.value;
    }
    if (this.data instanceof Array) {
      this.addressVal = this.data;
    }
  },
  watch: {
    value(val) {
      this.currentValue = val;
    },
    currentValue(val) {
      this.$emit(val ? "on-show" : "on-hide");
      this.$emit("input", val);
    },
    data(val) {
      this.addressVal = val;
    }
  },
  data() {
    return {
      currentValue: false,
      //选出的值
      addressVal: []
    };
  },
  methods: {
    addressChange(val) {
      console.log(val);
      this.addressVal = val;
    },
    onConfirm() {
      if (parseInt(this.length) <= this.addressVal.length) {
        this.currentValue = false;
        this.$emit("change", this.addressVal);
      } else {
        this.prompt("请选择");
      }
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "src/style/mixin";
.addresTitle {
  display: flex;
  justify-content: space-between;
  height: vw(88);
  line-height: vw(88);
  border-bottom: 1px solid #ebebeb;
  padding: 0 vw(20);
}
.addresTitle p {
  font-size: vw(32);
}
.addresTitle span {
  width: vw(80);
  flex-shrink: 0;
  text-align: center;
}
.addresTitle span {
  font-size: vw(28);
  color: #999;
}
.addresTitle span:last-child {
  color: $mainColor;
}
</style>

使用方法

//引入
import addressPopup from "@/components/common/addressPopup";
components: {
    addressPopup
},
//组件
<address-popup v-model="addressPopupShow" :data="selectAddressData" :length="2" :force="true" @change="addressChange"></address-popup>