WEUI控件JS用法

/* dialog */
    document.querySelector('#alertBtn').addEventListener('click', function () {
        _weui2.default.alert('自定义标题的alert', function () {
            console.log('ok');
        }, {
            title: '自定义标题'
        });
    });

    /* confirm */
    document.querySelector('#confirmBtn').addEventListener('click', function () {
        _weui2.default.confirm('自定义标题的confirm', function () {
            console.log('yes');
        }, function () {
            console.log('no');
        }, {
            title: '自定义标题'
        });
    });

    /* toast */
    document.querySelector('#toastBtn').addEventListener('click', function () {
        _weui2.default.toast('操作成功', {
            duration: 3000,
            className: "bears"
        });
    });

    /* loading */
    document.querySelector('#loadingBtn').addEventListener('click', function () {
        var loading = _weui2.default.loading('loading');
        setTimeout(function () {
            loading.hide();
        }, 3000);
    });

    /* actionSheet */
    document.querySelector('#actionSheetBtn').addEventListener('click', function () {
        _weui2.default.actionSheet([{
            label: '拍照',
            onClick: function onClick() {
                console.log('拍照');
            }
        }, {
            label: '从相册选择',
            onClick: function onClick() {
                console.log('从相册选择');
            }
        }, {
            label: '其他',
            onClick: function onClick() {
                console.log('其他');
            }
        }], [{
            label: '取消',
            onClick: function onClick() {
                console.log('取消');
            }
        }], {
            className: "custom-classname"
        });
    });

    /* topTips */
    document.querySelector('#topTipsBtn').addEventListener('click', function () {
        _weui2.default.topTips('请填写正确的字段', {
            duration: 3000,
            className: "custom-classname",
            callback: function callback() {
                console.log('close');
            }
        });
    });

    /* picker */
    // 普通选择器
    document.querySelector('#pickerBtn').addEventListener('click', function () {
        _weui2.default.picker([{
            label: '飞机票',
            value: 0
        }, {
            label: '火车票(disabled)',
            disabled: true,
            value: 1
        }, {
            label: '的士票(disabled)',
            disabled: true,
            value: 2
        }, {
            label: '住宿费',
            value: 3
        }, {
            label: '礼品费',
            value: 11
        }, {
            label: '活动费',
            value: 5
        }, {
            label: '通讯费',
            value: 6
        }, {
            label: '补助',
            value: 7
        }, {
            label: '通讯费',
            value: 8
        }, {
            label: '其他',
            value: 9
        }], {
            defaultValue: [11],
            className: 'custom-classname',
            onChange: function onChange(result) {
                //console.log(item, index);
                console.log(result);
            },
            onConfirm: function onConfirm(result) {
                console.log(result);
            },
            id: 'picker'
        });
    });

    // 时间选择器
    document.querySelector('#datePickerBtn').addEventListener('click', function () {
        _weui2.default.datePicker({
            start: '2016-12-29',
            end: '2030-12-29',
            /**
             * https://zh.wikipedia.org/wiki/Cron
             * cron 表达式后三位
             * 示例：
             *  * * *                每天
             *  5 * *                每个月的5日
             *  1-10 * *             每个月的前10日
             *  1,5,10 * *           每个月的1号、5号、10号
             *  */2 * *             每个月的 1、3、5、7...日，注意写的时候斜杠“/”前面没有反斜杠“”，这是因为是注释所以需要转义
             *  * 2 0                2月的每个周日
             *  * * 0,6              每个周末
             *  * * 3                每周三
             */
            cron: '* */2 0',
            defaultValue: [2017, 7, 9],
            onChange: function onChange(result) {
                console.log(result);
            },
            onConfirm: function onConfirm(result) {
                console.log(result);
            },
            id: 'datePicker'
        });
    });

    // 多列选择器
    document.querySelector('#multiPickerBtn').addEventListener('click', function () {
        _weui2.default.picker([{
            label: '1',
            value: '1'
        }, {
            label: '2',
            value: '2'
        }, {
            label: '3',
            value: '3'
        }], [{
            label: 'A',
            value: 'A'
        }, {
            label: 'B',
            value: 'B'
        }, {
            label: 'C',
            value: 'C'
        }], {
            defaultValue: ['3', 'A'],
            onChange: function onChange(result) {
                console.log(result);
            },
            onConfirm: function onConfirm(result) {
                console.log(result);
            },
            id: 'multiPickerBtn'
        });
    });

    // 级联选择器
    document.querySelector('#cascadePickerBtn').addEventListener('click', function () {
        _weui2.default.picker([{
            label: '广东',
            value: 0,
            children: [{
                label: '广州',
                value: 0,
                children: [{
                    label: '海珠',
                    value: 0
                }, {
                    label: '番禺',
                    value: 1
                }]
            }, {
                label: '佛山',
                value: 1,
                children: [{
                    label: '禅城',
                    value: 0
                }, {
                    label: '南海',
                    value: 1
                }]
            }]
        }, {
            label: '广西',
            value: 1,
            children: [{
                label: '南宁',
                value: 0,
                children: [{
                    label: '青秀',
                    value: 0
                }, {
                    label: '兴宁',
                    value: 1
                }]
            }, {
                label: '桂林',
                value: 1,
                children: [{
                    label: '象山',
                    value: 0
                }, {
                    label: '秀峰',
                    value: 1
                }]
            }]
        }], {
            depth: 3,
            defaultValue: [0, 1, 1],
            onChange: function onChange(result) {
                console.log(result);
            },
            onConfirm: function onConfirm(result) {
                console.log(result);
            },
            id: 'cascadePicker'
        });
    });

    /* searchbar */
    _weui2.default.searchBar('#searchBar');

    /* slider 因为需要获取长度，所以必须要在slider显示的时候才调用weui.slider*/
    var isSetSlider = false;
    function setSlider() {
        if (isSetSlider) return;
        isSetSlider = true;

        // 普通slider
        var sliderValue = document.getElementById("sliderValue");
        _weui2.default.slider('#slider', {
            defaultValue: 50,
            onChange: function onChange(percent) {
                sliderValue.innerHTML = Math.round(percent);
                console.log(percent);
            }
        });

        // 带step的slider
        var sliderStepValue = document.getElementById("sliderStepValue");
        _weui2.default.slider('#sliderStep', {
            step: 10,
            defaultValue: 40,
            onChange: function onChange(percent) {
                sliderStepValue.innerHTML = Math.round(percent);
                console.log(percent);
            }
        });

        // 分块的slider
        var sliderBlockValue = document.getElementById("sliderBlockValue");
        _weui2.default.slider('#sliderBlock', {
            step: 100 / 3,
            defaultValue: 33.333,
            onChange: function onChange(percent) {
                sliderBlockValue.innerHTML = Math.round(percent);
                console.log(percent);
            }
        });
    }

    /* tab */
    _weui2.default.tab('#tab', {
        defaultIndex: 0,
        onChange: function onChange(index) {
            console.log(index);

            if (index == 3) {
                setSlider(); // 设置slider
            }
        }
    });

    /* form */
    // 约定正则
    var regexp = {
        regexp: {
            IDNUM: /(?:^d{15}$)|(?:^d{18}$)|^d{17}[dXx]$/,
            VCODE: /^.{4}$/
        }
    };

    // 失去焦点时检测
    _weui2.default.form.checkIfBlur('#form', regexp);

    // 表单提交
    document.querySelector('#formSubmitBtn').addEventListener('click', function () {
        _weui2.default.form.validate('#form', function (error) {
            console.log(error);
            if (!error) {
                var loading = _weui2.default.loading('提交中...');
                setTimeout(function () {
                    loading.hide();
                    _weui2.default.toast('提交成功', 3000);
                }, 1500);
            }
        }, regexp);
    });

    /* 图片自动上传 */
    var uploadCount = 0,
        uploadList = [];
    var uploadCountDom = document.getElementById("uploadCount");
    _weui2.default.uploader('#uploader', {
        url: 'http://' + location.hostname + ':8002/upload',
        auto: true,
        type: 'file',
        fileVal: 'fileVal',
        compress: {
             1600,
            height: 1600,
            quality: .8
        },
        onBeforeQueued: function onBeforeQueued(files) {
            if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) {
                _weui2.default.alert('请上传图片');
                return false;
            }
            if (this.size > 10 * 1024 * 1024) {
                _weui2.default.alert('请上传不超过10M的图片');
                return false;
            }
            if (files.length > 5) {
                // 防止一下子选中过多文件
                _weui2.default.alert('最多只能上传5张图片，请重新选择');
                return false;
            }
            if (uploadCount + 1 > 5) {
                _weui2.default.alert('最多只能上传5张图片');
                return false;
            }

            ++uploadCount;
            uploadCountDom.innerHTML = uploadCount;
        },
        onQueued: function onQueued() {
            uploadList.push(this);
            console.log(this);
        },
        onBeforeSend: function onBeforeSend(data, headers) {
            console.log(this, data, headers);
            // $.extend(data, { test: 1 }); // 可以扩展此对象来控制上传参数
            // $.extend(headers, { Origin: 'http://127.0.0.1' }); // 可以扩展此对象来控制上传头部

            // return false; // 阻止文件上传
        },
        onProgress: function onProgress(procent) {
            console.log(this, procent);
        },
        onSuccess: function onSuccess(ret) {
            console.log(this, ret);
        },
        onError: function onError(err) {
            console.log(this, err);
        }
    });

    // 缩略图预览
    document.querySelector('#uploaderFiles').addEventListener('click', function (e) {
        var target = e.target;

        while (!target.classList.contains('weui-uploader__file') && target) {
            target = target.parentNode;
        }
        if (!target) return;

        var url = target.getAttribute('style') || '';
        var id = target.getAttribute('data-id');

        if (url) {
            url = url.match(/url((.*?))/)[1].replace(/"/g, '');
        }
        var gallery = _weui2.default.gallery(url, {
            className: 'custom-name',
            onDelete: function onDelete() {
                _weui2.default.confirm('确定删除该图片？', function () {
                    --uploadCount;
                    uploadCountDom.innerHTML = uploadCount;

                    for (var i = 0, len = uploadList.length; i < len; ++i) {
                        var file = uploadList[i];
                        if (file.id == id) {
                            file.stop();
                            break;
                        }
                    }
                    target.remove();
                    gallery.hide();
                });
            }
        });
    });

    /* 图片手动上传 */
    var uploadCustomFileList = [];

    // 这里是简单的调用，其余api请参考文档
    _weui2.default.uploader('#uploaderCustom', {
        url: 'http://localhost:8002/upload',
        auto: false,
        onQueued: function onQueued() {
            uploadCustomFileList.push(this);
        }
    });

    // 手动上传按钮
    document.getElementById("uploaderCustomBtn").addEventListener('click', function () {
        uploadCustomFileList.forEach(function (file) {
            file.upload();
        });
    });

    // 缩略图预览
    document.querySelector('#uploaderCustomFiles').addEventListener('click', function (e) {
        var target = e.target;

        while (!target.classList.contains('weui-uploader__file') && target) {
            target = target.parentNode;
        }
        if (!target) return;

        var url = target.getAttribute('style') || '';
        var id = target.getAttribute('data-id');

        if (url) {
            url = url.match(/url((.*?))/)[1].replace(/"/g, '');
        }
        var gallery = _weui2.default.gallery(url, {
            onDelete: function onDelete() {
                _weui2.default.confirm('确定删除该图片？', function () {
                    var index;
                    for (var i = 0, len = uploadCustomFileList.length; i < len; ++i) {
                        var file = uploadCustomFileList[i];
                        if (file.id == id) {
                            index = i;
                            break;
                        }
                    }
                    if (index) uploadCustomFileList.splice(index, 1);

                    target.remove();
                    gallery.hide();
                });
            }
        });
    });