用IosSelect做一个日期选择组件

image.png
官网：https://github.com/zhoushengmufc/iosselect
iosselect适用于android和iOS设备(PC端支持IE9+，不过PC端上滑动体验不太实用)
我这里是vue+ts+iosselect
1.dom创建

<div class="mui-input-row" @click="open">
  <input type="text" v-model="dateTime" placeholder="请选择开始日期" readonly />
</div>

2.下载css和js文件,并引入
js

import IosSelect from './iosSelect';

style

@import './iosSelect.css';

3.初始化数据，并填入（数据可以自己随意创建，我这里创建的数据为最多只能选择当前的时间）
这里使用的是6级联动，每级的数据分别是年月日，时分秒

public dateTime = '';
private IosSelect: any = null;
// 打开日期插件
private open() {
    // 初始化时间 当前时间（年月日，时分秒）
    const now = new Date();
    const nowYear = now.getFullYear();
    const nowMonth = now.getMonth() + 1;
    const nowDay = now.getDate();
    const nowHour = now.getHours();
    const nowMinute = now.getMinutes();
    const nowSecond = now.getSeconds();
    // 方法（规则可自己按照需求定）
    function formatYear() {
        const arr: ValuePortantI[] = [];
        for (let i = nowYear - 1; i <= nowYear; i++) {
            arr.push({
                id: i.toString(),
                value: i + '年'
            });
        }
        return arr;
    }
    function formatMonth(num) {
        const arr: ValuePortantI[] = [];
        for (let i = 1; i <= num; i++) {
            arr.push({
                id: i <= 9 ? `0${i}` : i.toString(),
                value: i <= 9 ? `0${i}月` : i + '月'
            });
        }
        return arr;
    }
    function formatDate(num) {
        const arr: ValuePortantI[] = [];
        for (let i = 1; i <= num; i++) {
            arr.push({
                id: i <= 9 ? `0${i}` : i.toString(),
                value: i <= 9 ? `0${i}日` : i + '日'
            });
        }
        return arr;
    }
    function formatHour(num) {
        const arr: ValuePortantI[] = [];
        for (let i = 0; i <= num; i++) {
            arr.push({
                id: i <= 9 ? `0${i}` : i.toString(),
                value: i <= 9 ? `0${i}時` : i + '時'
            });
        }
        return arr;
    }
    function formatMinute(num) {
        const arr: ValuePortantI[] = [];
        for (let i = 0; i <= num; i++) {
            arr.push({
                id: i <= 9 ? `0${i}` : i.toString(),
                value: i <= 9 ? `0${i}分` : i + '分'
            });
        }
        return arr;
    }
    function formatSecond(num) {
        const arr: ValuePortantI[] = [];
        for (let i = 0; i <= num; i++) {
            arr.push({
                id: i <= 9 ? `0${i}` : i.toString(),
                value: i <= 9 ? `0${i}秒` : i + '秒'
            });
        }
        return arr;
    }

    // 数据初始化
    const dateMonth = function(year, callback) {
        if (year == nowYear) {
            callback(formatMonth(nowMonth));
        } else {
            callback(formatMonth(12));
        }
    };
    const dateDay = function(year, month, callback) {
        if (year == nowYear && month == nowMonth) {
            callback(formatDate(nowDay));
        } else if (/^(1|3|5|7|8|10|12)$/.test(month)) {
            callback(formatDate(31));
        } else if (/^(4|6|9|11)$/.test(month)) {
            callback(formatDate(30));
        } else if (/^2$/.test(month)) {
            if (year % 4 === 0 && year % 100 !== 0) {
                callback(formatDate(29));
            } else if (year % 400 === 0) {
                callback(formatDate(29));
            } else {
                callback(formatDate(28));
            }
        } else {
            throw new Error('month is illegal');
        }
    };
    const dateHour = function(year, month, day, callback) {
        if (year == nowYear && month == nowMonth && day == nowDay) {
            callback(formatHour(nowHour));
        } else {
            callback(formatHour(24));
        }
    };
    const dateMinute = function(year, month, day, hour, callback) {
        if (year == nowYear && month == nowMonth && day == nowDay && hour == nowHour) {
            callback(formatMinute(nowMinute));
        } else {
            callback(formatMinute(60));
        }
    };
    const dateSecond = function(year, month, day, hour, minute, callback) {
        if (year == nowYear && month == nowMonth && day == nowDay && hour == nowHour && minute == nowMinute) {
            callback(formatSecond(nowSecond));
        } else {
            callback(formatSecond(60));
        }
    };
    // 插件初始化
    this.IosSelect = new IosSelect(6, [formatYear(), dateMonth, dateDay, dateHour, dateMinute, dateSecond], {
        title: '',
        itemHeight: 35,
        itemShowCount: 9,
        closeText: '取消',
        sureText: '確認',
        oneLevelId: nowYear,
        twoLevelId: nowMonth,
        threeLevelId: nowDay,
        fourLevelId: nowHour,
        fiveLevelId: nowMinute,
        sixLevelId: nowSecond,
        callback: (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj, selectSixObj) => {
            this.dateTime =
                selectOneObj.id + '-' + selectTwoObj.id + '-' + selectThreeObj.id + ' ' + selectFourObj.id + ':' + selectFiveObj.id + ':' + selectSixObj.id;
                        //  告诉父组件，选择的日期
            this.$emit('changeValue', this.dateTime);
        }
    });
}
private destroyed() {
        //  最后一定要close，否则在组件打开的情况下切换路由，组件不会关闭
    this.IosSelect?.close();
}

4.父组件如何调用

<dateTimeRange @changeValue="changeValue"></dateTimeRange>
changeValue(val) {
    this.time = val;
}

其实iosSelect还是很灵活的，样式可以根据自己需要改变，数据也可自己添加，只是相对于封装好的组件，会有点麻烦
以此类推，想要实现其他的用法只需要改变数据和联动级数