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

最新推荐文章于 2024-07-18 17:33:01 发布

这不是那个谁吗

最新推荐文章于 2024-07-18 17:33:01 发布

阅读量2.2k

点赞数

分类专栏：经验谈好玩的文章标签： html js layUI

本文链接：https://blog.csdn.net/xnattack/article/details/106642921

版权

经验谈同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

好玩的

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

    /**
     * 封装的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>