4.复选框组件封装（基于backbone）

1. html、css部分

<!--
 * @Date: 2021-08-10 09:32:23
 * @LastEditTime: 2021-08-29 15:49:21
 * @Description: 复选框
-->
<style>
    .pd-select-dropdown__wrap {
        display: inline-block;
        position: relative;
        margin-left: 10px;
    }

    .pd-select-dropdown__wrap input.queryInfo[type='text'] {
        background: #fff;
    }
    .pd-select-dropdown__wrap input.queryInfo[type='text']:hover {
        cursor: pointer;
        border-color: #c0c4cc;
    }
    .pd-select-dropdown__wrap input.queryInfo[type='text']:focus {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    }
    .pd-select-dropdown__wrap .inputBox {
        position: relative;
    }

    .pd-select-dropdown__wrap .inputBox i.icon-input {
        background: url(assets/images/oa/下拉.png) no-repeat;
        position: absolute;
        right: 9px;
        top: 10px;
        width: 10px;
        height: 10px;
        background-size: contain;
    }

    .pd-select-dropdown__wrap .pickProType {
        padding: 5px 10px;
        max-height: 200px;
        overflow-y: auto;
        width: 100%;
    }

    .pd-select-dropdown__wrap .pickProType li {
        white-space: nowrap;
        display: flex;
        align-items: center;
    }
    .pd-select-dropdown__wrap .pickProType .pd-select-dropdown__list .inputS {
        margin: 0;
    }
    .pd-select-single {
        width: auto;
        height: 30px;
        outline: none;
        margin-left: 10px;
        line-height: 30px;
        padding: 5px 10px;
        border-radius: 3px;
        display: inline-block;
        border: 1px solid #CCCCCC;
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    }
    .pd-select-single:hover {
        cursor: pointer;
        border-color: #c0c4cc;
    }
    .pd-select-single:focus {
        border-color: #66afe9;
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
    }
</style>
<%if(multiple){ %>
<div class="oa pd-select-dropdown__wrap">
    <div class="inputBox">
        <i class="icon-input"></i>
        <input type="text" value="" title="" class="queryInfo form-control input-sm input-v5" placeholder="<%=placeholder%>" autocomplete="off">
    </div>
    <div class="pickProType dropdown-menu wkt-scroll" style="display: none;">
        <ul class="pd-select-dropdown__list">

        </ul>
    </div>
</div>
<%} else {%>
    <span style="font-size: 14px;"><%= selBoxName%>:</span>
    <select class="pd-select-single">

    </select>
<%}%>

2. js部分

/*
 * @Date: 2021-08-10 09:32:33
 * @LastEditTime: 2021-09-03 10:15:34
 * @Description: 复选框组件
 */
define([
    'widgets/TabWidget',
    'text!./index.html'
], function(
    TabWidget, 
    Template
) {
    var widget = TabWidget.extend({ 
        events: {
            "click  .contentContainer": "hideMultiselectBox",
            "click  .pd-select-dropdown__wrap .queryInfo": "showMultiselectBox",
            "click  .pd-select-dropdown__list > li .selectSingle": "onSelectChange",
            // "input  .pd-select-dropdown__wrap input.queryInfo": 'debouncedOnInputChange',
            "change .pd-select-single": "handleChange",
        },
        render: function(ops) {
            this.option = Object.assign({
                placeholder: "请选择", // 表格列
                data: [],
                selBoxName: '',
                filterable: false,    //是否可搜索
                multiple: true        // 是否多选
            }, ops);
            
            this.timer = null
            this.$el.html(_.template(Template)({
                ...this.option
            }));
            ops.data.length && this.renderSelect()

            // 鼠标再次点击隐藏下拉
            const _this = this;
            $("body").mouseup(function (e) {
                const pop = _this.$el.find(".pd-select-dropdown__wrap .pickProType");
                if (!pop.is(e.target) && pop.has(e.target).length === 0) {
                    pop.hide();
                }
            });
            return this
        },
        renderSelect: function() {
            const { data, multiple } = this.option
            let content = ''
            if(multiple) {
                content += `<li>
                    <label class="inputS single">
                        <span class="unchecked">
                            <input type="checkbox" class="selectSingle" style="margin-top:0px;" eleName="全选">
                            <span class="glyphicon glyphicon-ok"></span>
                        </span>
                    </label>
                    <label for="checkAll"><span title="全选/全不选">全选</span></label>
                </li>`;
                data.forEach( val => {
                    content += `<li>
                        <label class="inputS single">
                            <span class="unchecked">
                                <input type="checkbox" class="selectSingle" style="margin-top:0px;"eleName="${val}">
                                <span class="glyphicon glyphicon-ok"></span>
                            </span>
                        </label>
                        <label for="${val}"><span title="${val}">${val}</span></label>
                    </li>`;
                })
                this.$el.find('.pd-select-dropdown__wrap .pd-select-dropdown__list').empty().append(content)
            } else {
                content += ` <option value="" selected >全部</option> `
                data.forEach( item => {
                    content += ` <option value="${item}">${item}</option> `
                })
                this.$el.find('.pd-select-single').empty().append(content)
            }
        },
        checkAll: function (checkVal = true) {
            const { data } = this.option;
            let inputVal = "";
            if (checkVal) {
                data.forEach((str, i) => {
                    inputVal += str;
                    i !== data.length - 1 && (inputVal += ",");
                })
            }
            this.$el
                .find('.pd-select-dropdown__wrap input.queryInfo[type="text"]')
                .val(inputVal);
            this.$el.find(".pd-select-dropdown__wrap .pd-select-dropdown__list .inputS input").each(function (index, element) {
                element.checked = checkVal
            })
            checkVal
                ? this.$el.find(".pd-select-dropdown__wrap .pd-select-dropdown__list .inputS .unchecked").addClass("checked")
                : this.$el.find(".pd-select-dropdown__wrap .pd-select-dropdown__list .inputS .unchecked").removeClass("checked")
        },
        //单选
        handleChange: function(e) {
            this.trigger(
                "on-select-change",
                $(e.currentTarget).val()
            );
        },
        //复选
        onSelectChange: function(e) {
            e.stopPropagation();
            
            let nowEleName = $(e.currentTarget).attr("eleName");
            const checkVal = !!$(e.currentTarget).prop("checked");

            if (nowEleName === "全选") {
                this.checkAll(checkVal);
                if (!checkVal) {
                    this.trigger(
                        "on-select-change",
                        "全不选"
                    );
                    return;
                }
            } else {
                checkVal
                    ? $(e.currentTarget).parent().addClass("checked")
                    : $(e.currentTarget).parent().removeClass("checked")
                let getInput = this.$el
                    .find('.inputBox input.queryInfo[type="text"]')
                    .val();
                if (checkVal) {
                    let newValue = getInput ? `${getInput},${nowEleName}` : nowEleName;
                    this.$el
                        .find('.inputBox input.queryInfo[type="text"]')
                        .val(newValue);
                } else {
                    let arr = getInput.split(",");
                    arr.splice(
                        arr.findIndex((v) => v == nowEleName),
                        1
                    );
                    this.$el
                        .find('.inputBox input.queryInfo[type="text"]')
                        .val(arr.join(","));
                }
            }
            this.trigger(
                "on-select-change",
                this.$el.find('.inputBox input.queryInfo[type="text"]').val()
            );
        },
        //显示复选框
        showMultiselectBox: function(e) {
            e.stopPropagation();
            let that = this; 
            let hideBoxNum = that.$el.find(".pickProType").length;
            for (let i = 0; i < hideBoxNum; i++) {
                that.$el.find(".pickProType").eq(i).hide();
            }
            $(e.currentTarget).parent().siblings('.pickProType').show();
        },
        debouncedOnInputChange: function(e) {
            if (this.timer !== null) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                this.handleQueryChange($(e.currentTarget).val())      
            }, 500)
        },
        handleQueryChange: function(val) {
            let handleVal = ''
            $('.pd-select-dropdown__wrap .pd-select-dropdown__list li').each(function() {
                if(!val) {
                    $(this).show()
                    return void 0
                }

                handleVal = $(this).find('label:eq(1)>span').text()
                handleVal.indexOf(val) === -1 &&  $(this).hide()
            })
        }
    })
    return widget
});```