vue iosselect仿ios实现省市区三级联动选择

最新推荐文章于 2025-06-30 09:11:12 发布

红孩儿2011

最新推荐文章于 2025-06-30 09:11:12 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/qq_26642611/article/details/107529413

https://github.com/zhoushengmufc/iosselect
在这里插入图片描述

1. npm install iosselect
2. 页面单独引入iosSelect.css
3. 实例化组件

var data=[{'id': '10001', 'value': '演示数据1'},{'id': '10002', 'value': '演示数据2'}];
var showDom = document.querySelector('#showDom');// 绑定一个触发元素
var valDom = document.querySelector('#valDom');  // 绑定一个存储结果的元素
showDom.addEventListener('click', function () {  // 添加监听事件
    var val = showDom.dataset['id'];             // 获取元素的data-id属性值
    var title = showDom.dataset['value'];        // 获取元素的data-value属性值
	// 实例化组件
    var example = new IosSelect(1,               // 第一个参数为级联层级，演示为1
        [data],                             // 演示数据
        {
            container: '.container',             // 容器class
            title: '演示标题',                    // 标题
            itemHeight: 50,                      // 每个元素的高度
            itemShowCount: 3,                    // 每一列显示元素个数，超出将隐藏
            oneLevelId: val,                     // 第一级默认值
            callback: function (selectOneObj) {  // 用户确认选择后的回调函数
                valDom.value = selectOneObj.id;
                showDom.innerHTML = selectOneObj.value;
                showDom.dataset['id'] = selectOneObj.id;
                showDom.dataset['value'] = selectOneObj.value;
            }
    });
});

例子：

  <div id="select_contact">
     <input type="text"  placeholder="请选择省/市/区、县"   v-model="areaValue"/>
  </div>

<script lang="ts">
// @ts-ignore  ts一定要加上这个，不然会报错
import IosSelect from 'iosSelect'
 private areaValue: any 
 private form: any = {
    provinceId: 0,
    cityId: 0,
    countyId: 0
  } 
// 请求到省市区的数据后 执行以下方法
 private areaSelect () {
    let that = this
    let iosProvinces = this.areaForIos.Provinces
    let iosCitys = this.areaForIos.Citys
    let iosCountys = this.areaForIos.Counties
    var showDom = document.querySelector('#select_contact')// 绑定一个触发元素
    // @ts-ignore
    showDom.addEventListener('click', function () { // 添加监听事件
      var oneLevelId = that.form.provinceId || '0001'
      var twoLevelId = that.form.cityId || '510100'
      var threeLevelId = that.form.countyId || '510105'
      // 实例化组件
      var example = new IosSelect(3, // 第一个参数为级联层级，演示为1
        [iosProvinces, iosCitys, iosCountys], // 演示数据
        {
          container: '.container', // 容器class
          title: '地址选择', // 标题
          relation: [1, 1],
          itemHeight: 50, // 每个元素的高度
          oneLevelId: oneLevelId,
          twoLevelId: twoLevelId,
          threeLevelId: threeLevelId,
          callback: function (selectOneObj: any, selectTwoObj: any, selectThreeObj: any) { // 用户确认选择后的回调函数
            that.areaValue = selectOneObj.value + selectTwoObj.value + selectThreeObj.value
            that.form.provinceId = selectOneObj.id
            that.form.cityId = selectTwoObj.id
            that.form.countyId = selectThreeObj.id
          }
       })
    })
  }
</script>

附：

div, ul, li {
    margin: 0;
    padding: 0;
}
ul, li {
    list-style: none outside none;
}

/* layer begin */
.ios-select-widget-box.olay {
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: rgba(0, 0, 0, 0.75);
}
.ios-select-widget-box.olay > div {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
    bottom: 0;
    left: 0;
    visibility: visible;
}
.ios-select-widget-box header.iosselect-header {
    height: 44px;
    line-height: 44px;
    background-color: #eee;
    width: 100%;
    z-index: 9999;
    text-align: center;
}
.ios-select-widget-box header.iosselect-header a {
    font-size: 16px;
    color: #e94643;
    text-decoration: none;
}
.ios-select-widget-box header.iosselect-header a.close {
    float: left;
    padding-left: 15px;
    height: 44px;
    line-height: 44px;
}
.ios-select-widget-box header.iosselect-header a.sure {
    float: right;
    padding-right: 15px;
    height: 44px;
    line-height: 44px;
}
.ios-select-widget-box {
    padding-top: 44px;
}
.ios-select-widget-box .one-level-contain,
.ios-select-widget-box .two-level-contain,
.ios-select-widget-box .three-level-contain,
.ios-select-widget-box .four-level-contain,
.ios-select-widget-box .five-level-contain {
    height: 100%;
    overflow: hidden;
}
.ios-select-widget-box .iosselect-box {
    overflow: hidden;
}
.ios-select-widget-box .iosselect-box > div {
    display: block;
    float: left;
}
.ios-select-widget-box ul {
    background-color: #fff;
}
.ios-select-widget-box ul li {
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    background-color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    color: #111;
    opacity: .3;
}
.ios-select-widget-box ul li.at {
    font-size: 16px;
    opacity: 1;
}
.ios-select-widget-box ul li.side1 {
    font-size: 15px;
    opacity: .7;
}
.ios-select-widget-box ul li.side2 {
    font-size: 14px;
    opacity: .5;
}
.ios-select-widget-box.one-level-box .one-level-contain {
    width: 100%;
}
.ios-select-widget-box.one-level-box .two-level-contain,
.ios-select-widget-box.one-level-box .three-level-contain,
.ios-select-widget-box.one-level-box .four-level-contain,
.ios-select-widget-box.one-level-box .five-level-contain,
.ios-select-widget-box.one-level-box .six-level-contain {
    width: 0;
}
.ios-select-widget-box.two-level-box .one-level-contain, 
.ios-select-widget-box.two-level-box .two-level-contain {
  width: 50%;
}
.ios-select-widget-box.two-level-box .three-level-contain,
.ios-select-widget-box.two-level-box .four-level-contain,
.ios-select-widget-box.two-level-box .five-level-contain,
.ios-select-widget-box.two-level-box .six-level-contain {
    width: 0;
}
.ios-select-widget-box.three-level-box .one-level-contain, 
.ios-select-widget-box.three-level-box .two-level-contain {
    width: 30%;
}
.ios-select-widget-box.three-level-box .three-level-contain {
    width: 40%;
}
.ios-select-widget-box.three-level-box .four-level-contain
.ios-select-widget-box.three-level-box .five-level-contain,
.ios-select-widget-box.three-level-box .six-level-contain {
    width: 0%;
}

.ios-select-widget-box.four-level-box .one-level-contain, 
.ios-select-widget-box.four-level-box .two-level-contain,
.ios-select-widget-box.four-level-box .three-level-contain,
.ios-select-widget-box.four-level-box .four-level-contain {
    width: 25%;
}
.ios-select-widget-box.four-level-box .five-level-contain,
.ios-select-widget-box.four-level-box .six-level-contain {
    width: 0%;
}

.ios-select-widget-box.five-level-box .one-level-contain, 
.ios-select-widget-box.five-level-box .two-level-contain,
.ios-select-widget-box.five-level-box .three-level-contain,
.ios-select-widget-box.five-level-box .four-level-contain,
.ios-select-widget-box.five-level-box .five-level-contain {
  width: 20%;
}
.ios-select-widget-box.five-level-box .six-level-contain {
  width: 0%;
}

.ios-select-widget-box.six-level-box .one-level-contain, 
.ios-select-widget-box.six-level-box .two-level-contain,
.ios-select-widget-box.six-level-box .three-level-contain,
.ios-select-widget-box.six-level-box .four-level-contain,
.ios-select-widget-box.six-level-box .five-level-contain {
  width: 16%;
}
.ios-select-widget-box.six-level-box .six-level-contain {
  width: 20%;
}
.ios-select-widget-box .cover-area1 {
    width: 100%;
    border: none;
    border-top: 1px solid #d9d9d9;
    position: absolute;
    top: 149px;
    margin: 0;
    height: 0;
}
.ios-select-widget-box .cover-area2 {
    width: 100%;
    border: none;
    border-top: 1px solid #d9d9d9;
    position: absolute;
    top: 183px;
    margin: 0;
    height: 0;
}
.ios-select-widget-box #iosSelectTitle {
    margin: 0;
    padding: 0;
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
    color: #333;
}
.ios-select-body-class {
    overflow: hidden;
}
.ios-select-body-class body {
    touch-action: none;
}
.ios-select-widget-box.olay > div > .ios-select-loading-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.5);
    display: none;
}
.ios-select-widget-box.olay > div > .ios-select-loading-box > .ios-select-loading { 
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OEMxMEI3NDI3MEIxMUU2ODVGMzhFNjYyMDIyOUFCMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OEMxMEI3NTI3MEIxMUU2ODVGMzhFNjYyMDIyOUFCMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4QzEwQjcyMjcwQjExRTY4NUYzOEU2NjIwMjI5QUIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU4QzEwQjczMjcwQjExRTY4NUYzOEU2NjIwMjI5QUIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GeWqMwAAA+BJREFUeNrMmVlsTGEUx+9cXZQiLZWKklhbQSSlSMUWSxAiJGJ5aSQehOiDF7yI4EFILW99I3iRSJGUPkiILSKp2OuJVtHWkrRVapn2jv+R/ycnn5l27rQz10l+mWlyl/+c833nO+c0FIlEnATMBbPAIn5OBuPAENAKToC74BtoB59AG/D9spBPgaPBdrAFjJH7Fa66TkRuNe8gP8Bb8Ap8j/eFaXFelwv286WZfKG2WL9SX5cFCuntBvAc/OoPD64HJ8EI5Q3tmW7whl4pAl/AUfAEDKZnQ1HuFXGPQGOiAsW7x8A26wUhirgMLnGtfe3hGcO5NApARpRnSchrY0UhlkAJxxmw0npYBzgOKinSj6WDCfRyphWFJnAPdMUjUH71WbDKElcDykGL0zcbCEroVf389+CW7Uk3ygNk/azghYIHDoCN/SDO4W6+A55aAiUrzImWz7StA2WWuF2gIpEc1ovVgQeWyELm06gCc8ARJU44DM45yTPZII8tkXO5DP4RuI8iPYqr4YmQbJN8+E4JlA1abAuUBbtZeU526O4khDWW3QdhK9TZWmAZd6/x3inw0UmdSZJ/pgSKlilGoMvTwoiTw/20k3p7yTyovRgScTNAvgrvFSbkVJuE+LU6GiXEefJHqfKefF5zgrMGVRnJZ4HEerryXjdzU1DWbB2BI10mRuPBej+1WhKsi8vLeDDXZRllwtvoBG8davNmS4gHUZyTQIWSrM1iQpyZptafo4QGabp9+JNmOijMY9MTtGWpEHe5PDHMGsz/DwQOUwI7XVYUZheP1ZVEAJbOFsGswTYR+EKF2NWVRABWwHPYeLDFZWKOKJFLAhRYpMQJjS7rsWYlcjlTT6pNOr5pahfL5m12KaparUPpZTcEILCEjjGniCy9iMk3F9hImzCXcZqQKhOnLFShjbBX/psQP4Aq5UUpdfZEGXEkKzGvZf4zu/exOdV0T1LJCZTx4gK2msm2Uq494z1pS29Ea5ra2RPrrm4HpwvJsplgtTW/kXq0M1ZffF2F2uMNe+nJUD+HVWaLm8AAtXNrOXTqcfQh2fwQmKdST4TTgAp6ui+WTWFTrUpedu15Fs29Do/kuDsIZlsiW7njryZQ2MrAaD5Yqko88+w6zoPCfsdv5VwjnnXayA67zYmUdGM/e0i+E7nWivnDPUWEz6iyPedngLkY7ARDrQeb72GOz5roVY/eylMHvxflXjkpLoKHfZ2wmhJIkvcylUi9BAnTa9U9DD59CzQm/csaZv0cn0JbOeK4ye/xbfcE/w0hYZvElnU8GEXBGRQjeewzi5B6rtP6RGY9vwUYACMHTam1T1ebAAAAAElFTkSuQmCC) no-repeat 0 0;
    background-size: contain;
    -webkit-animation: loading-keyframe 1s infinite linear;
            animation: loading-keyframe 1s infinite linear;
}
.fadeInUp .layer{
    -webkit-animation: fadeInUp .5s;
    animation: fadeInUp .5s;
}
.fadeOutDown .layer{
    -webkit-animation: fadeOutDown .5s!important;
    animation: fadeOutDown .5s!important;
}
@-webkit-keyframes loading-keyframe {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes loading-keyframe {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0,100%,0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
    }
}
@keyframes fadeOutDown {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

/**
 * IosSelect
 * @param {number} level 选择的层级 1 2 3 4 5 6 最多支持6层
 * @param {...Array} data [oneLevelData[, twoLevelData[, threeLevelData[, fourLevelData[, fiveLevelData[, sixLevelData]]]]]] 可以用数组，也可以用方法
 * @param {Object} options
 * @param {string=} options.container 组件插入到该元素下 可选
 * @param {Function} options.callback 选择完毕后的回调函数
 * @param {Function} options.fallback 选择取消后的回调函数
 * @param {Function} options.maskCallback 点击背景层关闭组件时触发的方法
 * @param {string=} options.title 选择框title
 * @param {number=} options.itemHeight 每一项的高度，默认 35
 * @param {number=} options.itemShowCount 组件展示的项数，默认 7，可选3,5,7,9，不过不是3,5,7,9则展示7项
 * @param {number=} options.headerHeight 组件标题栏高度 默认 44
 * @param {css=} options.cssUnit px或者rem 默认是px
 * @param {string=} options.addClassName 组件额外类名 用于自定义样式
 * @param {...Array=} options.relation 数组 [oneTwoRelation, twoThreeRelation, threeFourRelation, fourFiveRelation] 默认值：[0, 0, 0, 0, 0, 0]
 * @param {number=} options.relation.oneTwoRelation 第一列和第二列是否通过parentId关联
 * @param {number=} options.relation.twoThreeRelation 第二列和第三列是否通过parentId关联
 * @param {number=} options.relation.threeFourRelation 第三列和第四列是否通过parentId关联
 * @param {number=} options.relation.fourFiveRelation 第四列和第五列是否通过parentId关联
 * @param {number=} options.relation.fiveSixRelation 第五列和第六列是否通过parentId关联
 * @param {string=} options.oneLevelId 第一级选中id
 * @param {string=} options.twoLevelId 第二级选中id
 * @param {string=} options.threeLevelId 第三级选中id
 * @param {string=} options.fourLevelId 第四级选中id
 * @param {string=} options.fiveLevelId 第五级选中id
 * @param {string=} options.sixLevelId 第六级选中id
 * @param {boolean=} options.showLoading 如果你的数据是异步加载的