weui.js中的picker自定义实现移动端三级联动、多级联动(省市区联动)

weui中的picker默认组件只有两个,一个默认的picker,只有一级可选项,一个datePicker可以实现年月日联动,但是好多自定义场景需要自定义多级联动。

如时间2019-01-01 12:00:00这种N级联动或者省市区三级联动。

此处以省市区三级联动为例。

html代码:




    
        
        无标题文档\
        
        
        
        
    

    
        
    

picker的数据源的结构大概就是有子选项时为{label:"显示值",value:"编号或索引之类",children:[此处为数组,内含子对象,数据格式跟本格式一致,无子选项时children可不存在]};

如果需要更灵活的自定义方式,可以参考weui.js中的datepicker方法,观察官方是如何进行封装的:

function datePicker(options) {
        var defaults = _util2.default.extend({
            id: 'datePicker',
            onChange: _util2.default.noop,
            onConfirm: _util2.default.noop,
            start: 2000,
            end: 2030,
            cron: '* * *'
        }, options);

        // 兼容原来的 start、end 传 Number 的用法
        if (typeof defaults.start === 'number') {
            defaults.start = new Date(defaults.start + '/01/01');
        } else if (typeof defaults.start === 'string') {
            defaults.start = new Date(defaults.start.replace(/-/g, '/'));
        }
        if (typeof defaults.end === 'number') {
            defaults.end = new Date(defaults.end + '/12/31');
        } else if (typeof defaults.end === 'string') {
            defaults.end = new Date(defaults.end.replace(/-/g, '/'));
        }

        var findBy = function findBy(array, key, value) {
            for (var i = 0, len = array.length; i < len; i++) {
                var _obj = array[i];
                if (_obj[key] == value) {
                    return _obj;
                }
            }
        };

        var date = [];
        var interval = _cron2.default.parse(defaults.cron, defaults.start, defaults.end);
        var obj = void 0;
        do {
            obj = interval.next();

            var year = obj.value.getFullYear();
            var month = obj.value.getMonth() + 1;
            var day = obj.value.getDate();

            var Y = findBy(date, 'value', year);
            if (!Y) {
                Y = {
                    label: year + '年',
                    value: year,
                    children: []
                };
                date.push(Y);
            }
            var M = findBy(Y.children, 'value', month);
            if (!M) {
                M = {
                    label: month + '月',
                    value: month,
                    children: []
                };
                Y.children.push(M);
            }
            M.children.push({
                label: day + '日',
                value: day
            });
        } while (!obj.done);

        return picker(date, defaults);
    }

 

你可能感兴趣的:(weui.js中的picker自定义实现移动端三级联动、多级联动(省市区联动))