layUI 工具栏 增加自定义帮助按钮

layUI 工具栏 增加自定义帮助按钮_第1张图片

    /**
     * 封装的tips,适配laytable的配色,点击提示框外会关闭提示(layer.tips无法点击空白处隐藏tips)
     * @param html 提示内容
     * @param ele 绑定对象
     */
    tips(html, ele) {
        let style = document.createElement("style");
        style.appendChild(document.createTextNode("    /*帮助提示框*/\n" +
            "    body .zmn-tips {\n" +
            "\n" +
            "    }\n" +
            "\n" +
            "    body .zmn-tips .layui-layer-content {\n" +
            "        color: #0C0C0C;\n" +
            "        background-color: #e6e6e6;\n" +
            "        padding-right: 3px;\n" +
            "        width: 396px;\n" +
            "        height: 300px;\n" +
            "        overflow-x: hidden;\n" +
            "        overflow-y: scroll;\n" +
            "    }\n" +
            "\n" +
            "    body .zmn-tips .layui-layer-content::-webkit-scrollbar-track {\n" +
            "        background-color: #e6b31a;\n" +
            "    }\n" +
            "\n" +
            "    body i.layui-layer-TipsB, i.layui-layer-TipsT, i.layui-layer-TipsL, i.layui-layer-TipsR, i.layui-layer-TipsG {\n" +
            "        border-right-color: #e6e6e6;\n" +
            "    }\n" +
            "\n" +
            "    body .layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT {\n" +
            "        border-right-color: #e6e6e6;\n" +
            "    }"));
        let head = document.getElementsByTagName("head")[0];
        head.appendChild(style);
        layui.layer.open({
            type: 4
            , closeBtn: false
            , shade: 0.0001
            , tips: 1
            , skin: 'zmn-tips'
            , shadeClose: true
            , content: [html, ele]
        });
    },
    var done = function (res) {
        // 添加导出
        $("div[lay-event='LAYTABLE_EXPORT']").attr('lay-event', 'CUSTOM_EXPORT');
        /* if (res.extData) {
             $("#currentAmount").text(res.extData.currentAmount);
         }*/
        //导出旁边添加帮助按钮
        let hasHelpBtn = $('[lay-event=CUSTOM_HELP]').length !== 0;
        if (!hasHelpBtn) {
            $(".layui-table-tool-self").prepend(toolbar_help.innerHTML);
        }
    };
    // 监听表格头部工具栏
    table.on('toolbar(erp-ReportForms-Table)', function (obj) {
        if (obj.event === 'CUSTOM_HELP') {
            erpUtil.tips(help_content.innerHTML, this);
        }
    });

<script type="text/html" id="toolbar_help">
    <div class="layui-inline" title="帮助" lay-event="CUSTOM_HELP"><i class="layui-icon layui-icon-help"></i></div>
</script>
<script type="text/html" id="help_content">
    <div>
        内容 <br/>       
    </div>
</script>

你可能感兴趣的:(经验谈,好玩的)