address-parse/src/Distpicker.vue

<template>
  <div>
    <el-select
      v-model="defaultAddr.province_code"
      placeholder="请选择省/市"
      @change="checkProvince"
    >
      <el-option
        v-for="item in provinceJson"
        :key="item.code"
        :label="item.name"
        :value="item.code"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="defaultAddr.city_code"
      placeholder="请选择市/区"
      @change="checkCity"
    >
      <el-option
        v-for="city in cityJson"
        :key="city.code"
        :label="city.name"
        :value="city.code"
      >
      </el-option>
    </el-select>

    <el-select
      v-model="defaultAddr.area_code"
      placeholder="请选择区/县"
      @change="checkArea"
    >
      <el-option
        v-for="area in areaJson"
        :key="area.code"
        :label="area.name"
        :value="area.code"
      >
      </el-option>
    </el-select>

    <!-- <div class="distpicker-address-wrapper">
      <select
        v-model="province"
        placeholder="请选择省/市"
        @change="checkProvince"
      >
        <option
          v-for="(province, p_i) in provinceJson"
          :key="p_i"
          :value="province.name"
        >
          {{ province.name }}
        </option>
      </select>

      <select v-model="city" placeholder="请选择市/区" @change="checkCity">
        <option v-for="(city, c_i) in cityJson" :key="c_i" :value="city.name">
          {{ city.name }}
        </option>
      </select>
      <select v-model="area" placeholder="请选择区/县">
        <option v-for="(area, a_i) in areaJson" :key="a_i" :value="area.name">
          {{ area.name }}
        </option>
      </select>
    </div> -->
  </div>
</template>

<script>
// import { Select as ElSelect,Option as ElOption } from 'element-ui';

import AddressJson from "./lib/address-json";
console.log(AddressJson);
export default {
  name: "v-distpicker",
  // components:{ElSelect,ElOption},
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          province_code: "",
          province: "",
          city_code: "",
          city: "",
          area_code: "",
          area: "",
        };
      },
    },

    disabled: { type: Boolean, default: false },
    provinceDisabled: { type: Boolean, default: false },
    cityDisabled: { type: Boolean, default: false },
    areaDisabled: { type: Boolean, default: false },
  },
  data() {
    return {
      provinceJson: AddressJson,
      cityJson: [],
      areaJson: [],

      defaultAddr: {
        province_code: "",
        province: "",
        city_code: "",
        city: "",
        area_code: "",
        area: "",
      },
    };
  },
  created() {
    this.init();
  },
  // computed: {
  //   defaultAddr: {
  //     set(v) {
  //       console.log(v, 3);
  //       this.$emit("cancel", v);
  //     },
  //     get() {
  //       // return this.showModel;
  //       console.log(2);
  //       // 感觉使用setTimeout不是很严谨，但是目前还没有找到更好的办法解决
  //       setTimeout(() => {
  //         this.created = true;
  //         this.checkProvince();
  //         this.checkCity();
  //         this.checkArea();
  //         this.created = false;
  //       }, 100);

  //       return JSON.parse(JSON.stringify(this.value));
  //     },
  //   },
  // },
  mounted() {
    this.$watch("value", (res) => {
      this.init();
    });
  },
  //  不知道是哪里姿势不对用了此方法就一直无法获取父主键传过来的v-model
  // model: {
  //   // 使用model， 这儿2个属性，prop属性说，我要将msg作为该组件被使用时（此处为aa组件被父组件调用）v-model能取到的值，event说，我emit ‘cc’ 的时候，参数的值就是父组件v-model收到的值。
  //   prop:
  //     "defaultAddress",

  //     // {
  //     //   defaultAddress: {
  //     //     type: Object,
  //     //     default: () => {
  //     //       return {
  //     //         province_code: "",
  //     //         province: "",
  //     //         city_code: "",
  //     //         city: "",
  //     //         area_code: "",
  //     //         area: "",
  //     //       };
  //     //     },
  //     //   },
  //     // },
  //   event: "currentAddress",
  // },
  watch: {},
  methods: {
    init() {
      let newAddress = JSON.stringify(this.value);
      let oldAddress = JSON.stringify(this.defaultAddr);
      console.log(newAddress.toString(), oldAddress.toString());

      if (newAddress.toString() != oldAddress.toString()) {
        this.defaultAddr = JSON.parse(newAddress);
        console.log(1111);
        this.checkProvince();
        this.checkCity();
        this.checkArea();

        this.$emit("input", this.defaultAddr);
      }
    },
    // 选择省
    checkProvince() {
      this.provinceJson.forEach((element) => {
        if (
          (!this.defaultAddr.name &&
            element.code == this.defaultAddr.province_code) ||
          (!this.defaultAddr.code && element.name == this.defaultAddr.province)
        ) {
          this.cityJson = element.children;
          this.areaJson = [];

          this.defaultAddr.province_code = element.code;
          this.defaultAddr.province = element.name;
          this.defaultAddr.city_code = "";
          this.defaultAddr.area_code = "";
          // if (!this.created) {
          //   this.$emit("input", this.defaultAddr);
          //   this.defaultAddr.city_code = "";
          //   this.defaultAddr.area_code = "";
          // }
        }
      });
    },
    // 选择市
    checkCity() {
      this.cityJson.forEach((element) => {
        if (
          (!this.defaultAddr.name &&
            element.code == this.defaultAddr.city_code) ||
          (!this.defaultAddr.code && element.name == this.defaultAddr.city)
        ) {
          this.areaJson = element.children;

          this.defaultAddr.city_code = element.code;
          this.defaultAddr.city = element.name;
          this.defaultAddr.area_code = "";

          // if (!this.created) {
          //   this.$emit("input", this.defaultAddr);
          //   this.defaultAddr.area_code = "";
          // }
        }
      });
    },
    // 选择区县
    checkArea() {
      console.log(this.area_code);
      this.areaJson.forEach((element) => {
        if (
          (!this.defaultAddr.name &&
            element.code == this.defaultAddr.area_code) ||
          (!this.defaultAddr.code && element.name == this.defaultAddr.area)
        ) {
          this.defaultAddr.area_code = element.code;
          this.defaultAddr.area = element.name;
          // if (!this.created) {
          //   this.$emit("input", this.defaultAddr);
          // }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import url(https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/select.css);
@import url(https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/option.css);
@import url(https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/icon.css);

.distpicker-address-wrapper {
  color: #9caebf;
  select {
    padding: 0.5rem 0.75rem;
    height: 40px;
    font-size: 1rem;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    -webkit-transition: border-color ease-in-out 0.15s,
      -webkit-box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s,
      -webkit-box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s,
      -webkit-box-shadow ease-in-out 0.15s;

    option {
      font-weight: normal;
      display: block;
      white-space: pre;
      min-height: 1.2em;
      padding: 0px 2px 1px;
    }
  }
  ul {
    margin: 0;
    padding: 0;

    li {
      list-style: none;
    }
  }
  .address-header {
    background-color: #fff;

    ul {
      display: flex;
      justify-content: space-around;
      align-items: stretch;

      li {
        display: inline-block;
        padding: 10px 10px 7px;

        &.active {
          border-bottom: #52697f solid 3px;
          color: #52697f;
        }
      }
    }
  }
  .address-container {
    background-color: #fff;

    ul {
      height: 100%;
      overflow: auto;

      li {
        padding: 8px 10px;
        border-top: 1px solid #f6f6f6;

        &.active {
          color: #52697f;
        }
      }
    }
  }
}
.disabled-color {
  background: #f8f8f8;
}
</style>