使用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的状态

最后附上效果图 大功告成 记录下！~~~~~