iosselect简单使用(三级联动)

npm安装

npm install iosselect --save

index.html引入文件

<link rel="stylesheet" href="static/iosSelect.css">
<script type="text/javascript" src="static/iosSelect.js"></script>

<template>
  <div class="menu-container" ref="menuContainer">
    <div class="referen-btn">保存</div>
    <!-- 这个是内容 -->
    <div class="contents">
      <div class="userdatum-info">
        <label for="">店铺名称</label>
        <input type="text" placeholder="请填写店铺名称">
      </div>
      <div class="userdatum-info userdatum-info-next" @click.stop="changeMastDisplay('mastuserdatum')">
        <label for="">所属行业</label>
        <input type="text" placeholder="请填写所属行业">
      </div>
      <div class="userdatum-info" @click="initIosSelect">
        <label for="">所属区域</label>
        <!-- <input type="text" placeholder="请填写所属区域"> -->
        <!-- 三级联动 -->
        <input type="hidden" ref="contact_province_code" name="contact_province_code" data-id="0001" id="contact_province_code" value="" data-province-name="">                     
        <input type="hidden" ref="contact_city_code" name="contact_city_code" id="contact_city_code" value="" data-city-name="">
        <span ref="show_contact" data-city-code="52" data-province-code="2" data-district-code="50" id="show_contact">北京 北京 东城区</span>  
      </div>
      <div class="userdatum-info">
        <label for="">详细地址</label>
        <input type="text" placeholder="请填写详细地址">
      </div>
      <div class="userdatum-info">
        <label for="">联系人</label>
        <input type="text" placeholder="请填写联系人">
      </div>
      <div class="userdatum-info">
        <label for="">手机</label>
        <input type="text" placeholder="请填写手机">
      </div>
      <div class="userdatum-info">
        <label for="">邮箱</label>
        <input type="text" placeholder="请填写邮箱">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserDatum',
  data () {
    return {
      iosProvinces:[],
      iosCitys:[],
      iosCountys:[]
    }
  },
  methods: {
    topath: function (name) {
      this.$router.push({path:name});
    },
    changeMastDisplay: function (name) {
      this.$store.commit('mastdisplay',name);
    },
    initIosSelect: function () {
      let showContactDom = this.$refs.show_contact;
      let contactProvinceCodeDom = this.$refs.contact_province_code;
      let contactCityCodeDom = this.$refs.contact_city_code;

      let sccode = showContactDom.getAttribute('data-city-code');
      let scname = showContactDom.getAttribute('data-city-name');

      let oneLevelId = showContactDom.getAttribute('data-province-code');
      let twoLevelId = showContactDom.getAttribute('data-city-code');
      let threeLevelId = showContactDom.getAttribute('data-district-code');
      let iosSelect = new IosSelect(3, 
          [this.iosProvinces, this.iosCitys, this.iosCountys],
          {
            itemHeight: 35,
            itemShowCount: 5,
            relation: [1, 1],
            oneLevelId: oneLevelId,
            twoLevelId: twoLevelId,
            threeLevelId: threeLevelId,
            callback: function (selectOneObj, selectTwoObj, selectThreeObj) {
                contactProvinceCodeDom.value = selectOneObj.id;
                contactProvinceCodeDom.setAttribute('data-province-name', selectOneObj.value);
                contactCityCodeDom.value = selectTwoObj.id;
                contactCityCodeDom.setAttribute('data-city-name', selectTwoObj.value);

                showContactDom.setAttribute('data-province-code', selectOneObj.id);
                showContactDom.setAttribute('data-city-code', selectTwoObj.id);
                showContactDom.setAttribute('data-district-code', selectThreeObj.id);
                showContactDom.innerHTML = selectOneObj.value + ' ' + selectTwoObj.value + ' ' + selectThreeObj.value;
          }
      });
    },
    getareadata: function () {
      this.API.getareadata().then((response) => {
        response.filter((item,index) => {
          //拼接三级联动数据
          let area = {
            parentId:item.region_type,
            id:item.region_id,
            value:item.region_name,
            ...item
          };
          //过滤省市区的数据
          if(item.parent_id == 1){
            this.iosProvinces.push(area);
          }else if(item.parent_id == 2){
            this.iosCitys.push(area);
          }else if(item.parent_id == 3){
            this.iosCountys.push(area);
          }
        });
      }, (response) => {
          mui.toast('网络错误');
      });
    }
  },
  components: {

  },
  computed: {

  },
  created: function () {
    this.getareadata();
  }

}
</script>
<style scoped>
  *{
      margin: 0;
      padding: 0;
      font-size: 14px;
      font-family: "微软雅黑";
      color: #333;
  }
  .menu-container{
    /*overflow: hidden;*/
    background: #eee;
  }
  .contents{
    margin-top: 44px;
    position: relative;
    padding: 0;
    /*overflow: scroll;*/
  }
  .userdatum-info{
    height: 44px;
    line-height: 44px;
    padding: 0px 10px;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    position: relative;
  }

  .userdatum-info label, .userdatum-info input{
    float: left;
    margin: 0;
    padding: 0;
  }
  .userdatum-info:after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
  }
  .userdatum-info label{
    width: 20%;
  }
  .userdatum-info input{
    width: 80%;
    border: none;
    height: 43px;
    line-height: 44px;
    text-align: right;
  }
  .userdatum-info-next input{
    padding-right: 15px;
    background: url("../../../../assets/right-arrow.png") no-repeat right center;
  }
  .userdatum-info #show_contact{
    position: absolute;
    right: 10px;
    top: 0px;
    height: 44px;
    line-height: 44px;
    width: 80%;
    text-align: right;
    color: #666;
  }
  .referen-btn{
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    z-index: 10001;
    line-height: 44px;
  }
</style>