vue移動端 地址選擇器

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>