vue 이동단 주소 선택기

1. 구성 요소address.vue

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);
  }
};

사용법

// 
import zAddress from "./address.vue";
components: {
    zAddress 
},
// 

2. popup 탄창과 결합하여address를 사용합니다.vue

popup 구성 요소 주소:https://blog.csdn.net/weixin_40614372/article/details/91589824

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() {}
};

사용법

// 
import addressPopup from "@/components/common/addressPopup";
components: {
    addressPopup
},
//