【孤独旅者】封装一个三级联动和基于Vue的mintUI三级联动

原生JS封装：

moreSelect: function (url,elements) {
            function GetArea(url) {
                this.url = url
                this.init(elements)
            }
            GetArea.prototype = {
                num: 0,
                selections: null,
                list: [],
                createOptions(data, parent) {
                    if (!parent) return
                    if (parent.children) {
                        var leng = parent.children.length
                        for (var j = 0; j < leng; j++) {
                            parent.lastElementChild.textContent = ''
                            parent.lastElementChild.remove()
                        }
                    }
                    for (var i = 0; i < data.length; i++) {
                        var option = document.createElement('option');
                        option.textContent = data[i].name || data[i]
                        parent.appendChild(option)
                    }
                    parent.addEventListener('change', this.changeHandler);
                    parent.data = data
                    parent.self = this
                },
                init(elements) {
                    this.selections = elements
                    var xhr = new XMLHttpRequest();
                    xhr.addEventListener('load', this.loadHandler);
                    xhr.open('get', this.url)
                    xhr.send('')
                    xhr.self = this
                },
                loadHandler(e) {
                    this.self.list = JSON.parse(this.response)
                    this.self.createOptions(this.self.list, this.self.selections[this.self.num])
                },
                changeHandler(e) {
                    var list;
                    this.data.forEach((item) => {
                        if (item.name === this.value) {
                            list = item.city ? item.city : item
                        }
                    });
                    this.self.selections.forEach((item, val) => {
                        if (item.id === this.id) {
                            console.log(this.self.num)
                            this.self.num = item.id.split('select')[1] - 1
                        }
                    })
                    if (this.self.num > this.self.selections.length-1) {
                        return
                    }
                    this.self.num++
                    this.self.createOptions(list, this.self.selections[this.self.num])
                }
            }
            return getArea = new GetArea(url);
        }

基于Vue的mintUI三级联动：

　　本联动数据地址：https://github.com/modood/Administrative-divisions-of-China

　　Vue中使用mint-UI方法：

　　　　1、安装

　　　　　　cnpm install mint-ui --save-dev

　　　　2、引入

　　　　　　import MintUI from 'mint-ui'

　　　　　　import 'mint-ui/lib/style.css';

　　　　　　Vue.use(MintUI);

<template>
    <div>
      <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker>
      <p>地址三级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>
    </div>
</template>

<style>
</style>

<script>
import Vue from "vue";
import { Picker } from "mint-ui";
import myaddress from "../../data.json";
Vue.component(Picker.name, Picker);

export default {
  data() {
    return {
      myAddressSlots: [
        {
          flex: 1,//slot的CSS样式的flex 值
          defaultIndex: 1,//slot的初始选中值
          values: Object.keys(myaddress), //省份数组
          className: "slot1",//slot的类名
          textAlign: "center"//slot的对齐方式
        },
        {
          divider: true,//slot是否为分隔符
          content: "-",//slot分隔符显示文本
          className: "slot2"
        },
        {
          flex: 1,
          values: [],
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: [],
          className: "slot5",
          textAlign: "center"
        }
      ],
      myAddressProvince: "省",
      myAddressCity: "市",
      myAddresscounty: "区/县"
    };
  },
  created() {},
  methods: {
    onMyAddressChange(picker, values) {
      if (myaddress[values[0]]) {
        //此判断可不加，但是vue会报错
        picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回当前省的数组
        picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县是一个数组
        //省
        this.myAddressProvince = values[0];
        //市
        this.myAddressCity = values[1];
        //县
        this.myAddresscounty = values[2];
      }
    }
  },
  mounted() {
    this.$nextTick(() => {  
      this.myAddressSlots[0].defaultIndex = 0;
    });
  }
};
</script>

 

来源：oschina

链接：https://my.oschina.net/u/4341235/blog/3585865