使用vue+mintui 開發省市區功能

做移動端的都知道 經常會有省市區這種三級聯動的功能 今天研究了一下午~

1.准備工作 vue+mintui+省市區的json數據

下載地址：https://github.com/chzm/address_popup

下載好后需要3個json文件 進入dist找到這3個文件

將這3個文件放入到vue項目里 

新建一個處理這3個json方法的文件

import provinces from '../../static/provinces.json'
import areas from '../../static/areas.json'
import cities from '../../static/cities.json'

export const zmGetProvinces = () => {
    return provinces;
}

export const zmGetcities = (provinceCode) => {
    if (!provinceCode) {
        provinceCode = '11'
    }
    let citiesArr = [];
    cities.forEach(function (item) {
        if (item.provinceCode == provinceCode) {
            console.log(item)
            citiesArr.push(item)
        }
    })
    return citiesArr
}

export const zmGetareas = (cityCode) => {
    // console.log(areas)
    if (!cityCode) {
        cityCode = '1101'
    }
    let areasArr = [];
    areas.forEach(function (item) {
        if (item.cityCode == cityCode) {
            areasArr.push(item)
        }
    })
    return areasArr
}

在這文件處理下數據依次導出

接着可以將省市區做成一個組件方便后續使用 這里我使用的是mintui里的popup和picker這2個組件來搭配

<template>
  <div>
    <mt-popup class="pop" v-model="sexpopup" position="bottom">
      <mt-picker :slots="slots" valueKey="name" @change="onValuesChange"></mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import { zmGetProvinces, zmGetcities, zmGetareas } from "@/utils/zmRegion.js";
export default {
  props: ["result"],
  data() {
    return {
      slots: [
        {
          flex: 1,
          values: zmGetProvinces(),
          className: "slot1",
          textAlign: "right"
        },
        {
          divider: true,
          content: "",
          className: "slot2"
        },
        {
          flex: 1,
          values: zmGetcities("11"),
          className: "slot1",
          textAlign: "conter"
        },
        {
          divider: true,
          content: "",
          className: "slot2"
        },
        {
          flex: 1,
          values: zmGetareas("1101"),
          className: "slot3",
          textAlign: "center"
        }
      ],
      region: "",
      regionInit: false,
      sexpopup: this.result
    };
  },
  watch: {
    result(val) {
      this.sexpopup = val;
    },
    sexpopup(val) {
      this.$emit("changepop", val);
    }
  },
  methods: {
    onValuesChange(picker, values) {
      if (this.regionInit) {
        if (values[0] && values[1] && values[2]) {
          this.region =
            values[0]["name"] + values[1]["name"] + values[2]["name"];
          console.log(this.region);

          //給市、縣賦值
          let area = "";
          if (values[0].name == "北京市") {
            area = "1101";
          } else if (values[0].name == "天津市") {
            area = "1201";
          } else {
            area = values[1]["code"];
          }
          picker.setSlotValues(1, zmGetcities(values[0]["code"]));
          picker.setSlotValues(2, zmGetareas(area));

          //   this.$emit("getRegion", this.region);
        } else {
          console.log("數據不全");
        }
      } else {
        this.regionInit = true;
      }
      console.log(this.regionInit);
    }
  },

  created() {}
};
</script>

<style scoped>
.pop {
  width: 100%;
}
</style>

這里有個坑就是天津和北京市這2個地方滑動的時候數據不會重新刷新 在這里做了個處理

最后將組件導入需要用到的地方

這里用到了props組件見的雙向綁定 自行百度~~

使用一個點擊事件改變sexpopup的狀態 

最后附上效果圖 大功告成 記錄下！~~~~~