icon-selected
/
example.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" href="./css/example.css" />
        <script src="./libs/layui/layui.js"></script>
        <link rel="stylesheet" href="./libs/layui/css/layui.css" />
        <title>iconSelected - 图标选择器</title>
    </head>
    <body>
        <div class="board">
            <h1 class="title">效果展示</h1>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-form-label">选择图标1</div>
                    <div class="layui-input-block">
                        <input type="text" name="icon1" value="layui-icon layui-icon-username" placeholder="请选择" maxlength="16" autocomplete="off" class="layui-input layui-select-icon" id="icon" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">选择图标2</div>
                    <div class="layui-input-block">
                        <input type="text" name="icon2" value="layui-icon layui-icon-light" placeholder="请选择" maxlength="16" autocomplete="off" class="layui-input layui-select-icon" id="icon" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">名称</div>
                    <div class="layui-input-block">
                        <input type="text" name="name" value="用户管理" autofocus maxlength="16" autofocus required lay-verify="required" autocomplete="off" class="layui-input" placeholder="名称" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-label">备注信息</div>
                    <div class="layui-input-block">
                        <textarea name="remark" rows="3" placeholder="可留空" class="layui-textarea" style="resize: none"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="submit" value="保存" class="layui-btn" lay-submit />
                        <input type="reset" value="重新填写" class="layui-btn layui-btn-primary" />
                    </div>
                </div>
            </div>
        </div>
        <script>
            layui
                .config({
                    base: "./libs/layui_exts/",
                })
                .extend({
                    iconSelected: "iconSelected/js/index",
                });

            layui.use(["layer", "iconSelected", "form"], function () {
                var iconSelected = layui.iconSelected;
                var layer = layui.layer;
                var form = layui.form;

                /**
                 * v2 版本开始保持跟 layui 官方写法同步
                 * 使用 render 方法渲染, 并且 v2 开始支持 class 批量绑定
                 * v1 版本仅支持 id 绑定, 且初始化是 init
                 * 请注意辨别, v2版本于2021年8月19日发布
                 * 庆祝码云开放 Gitee Page 功能
                 * 本组织下所有开源扩展都会于近期同步升级到v2
                 * 都将统一初始化函数为  render
                 */
                iconSelected.render(".layui-select-icon", {
                    event: {
                        select(event, data) {
                            console.log("选中的图标数据", { event, data });
                        },
                    },
                });

                form.on("submit", function (data) {
                    layer.open({
                        title: "提交内容",
                        content: '<pre style="background-color: #f2f2f2; padding: 10px; border-radius: 5px; font-family: Consolas;">' + JSON.stringify(data.field, null, 4) + "</pre>",
                    });
                    return false;
                });
            });
        </script>
    </body>
</html>