layui下拉图标
效果图
组件下载
gitee下载：https://gitee.com/layui-exts/icon-selected
API参考：https://layui-exts.gitee.io/icon-selected/#/?id=api
或者
网盘下载，链接: https://pan.baidu.com/s/1FR7WEcJkzQlEHaK8sNnDlw 提取码: d731
使用方式
JS引入组件
layui.config({
base: $projectPath+"/js/util/layui-module/"
}).extend({
treeSelect: "treeSelect",
treeTable: "treeTable",
iconSelected: "iconSelected/js/index", // 这个是图标选择器组件
});
html 中
<link rel="stylesheet" href="${projectPath}/js/util/layui-module/iconSelected/css/theme.css" />
<!-- 这个是包在layui-form里的 -->
<input type="text" name="iconCls" id="iconCls" value="layui-icon layui-icon-username" class="layui-input" placeholder="请选择图标" >
JS 中
layui.use(["iconSelected"], function() {
var iconSelected = layui.iconSelected;
// 图标选择器初始化
iconSelected.render("#iconCls", {
event: {
select(event, data) {
console.log("选中的图标数据", { event, data });
},
},
});
// 初始化且赋值
//iconSelected.render("#iconCls", {value: res.iconCls});
});
/**
* 弹框中如果出现多个图标选择器的话使用这种方式-弹框成功回调方法内使用
* 初始化图标选择器--------------------------------------------------------------------------------
*/
function initIconSel(icon){
$(".layui-ext-icon-selected-input").remove();
$(".layui-ext-icon-selected-container").remove();
iconSelected.render("#iconCls", {value: icon});
}
以上即可实现
下面两个参考
1、非弹框模式下使用
<!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>
2、弹框模式下使用
<!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"/>
<style>
/*注意!*/
/*如果是嵌套在layer内, 需要覆盖掉layer弹层默认的overflow: auto;*/
/*否则会出现滚动条,并且显示不全*/
.layui-layer-page .layui-layer-content {
overflow: visible;
}
</style>
<title>iconSelected - 图标选择器</title>
</head>
<body>
<div class="board">
<h1 class="title">效果展示</h1>
<h3 style="text-align: center; margin-bottom: 30px;">示例2: 嵌套在普通弹层内使用</h3>
<button id="show-layer" class="layui-btn layui-btn-fluid">打开弹层</button>
</div>
<script type="text/html" id="tpl">
<div class="layui-form" style="padding: 15px;">
<div class="layui-form-item">
<div class="layui-form-label">选择图标</div>
<div class="layui-input-block">
<input type="text" name="icon" value="layui-icon layui-icon-username" placeholder="请选择" maxlength="16" autocomplete="off" class="layui-input" 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">
<input type="text" name="sort" value="10" placeholder="序号" class="layui-input" id="sort"/>
</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>
</script>
<script>
layui
.config({
base: "./libs/layui_exts/",
})
.extend({
iconSelected: "iconSelected/js/index",
});
layui.use(["layer", "iconSelected", "form", "jquery"], function () {
var iconSelected = layui.iconSelected;
var layer = layui.layer;
var form = layui.form;
var $ = layui.$;
$("#show-layer").click(function () {
layer.open({
type: 1,
title: "提交表单",
btn: false,
content: $("#tpl").text(),
success: function () {
iconSelected.render("#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>
API
-
render
初始化
在 v1 版本为 init
这就没啥好说的了
如果需要添加图标请保证该 API 在最后面调用! -
icons
取出默认的图标数据
即 layui 官方图标清单 -
addIcon(name,classList)
添加一个图标(在尾部)
参数分别为:
显示的名字
图标的样式 -
addIcons(icons)
批量添加图标(在尾部)
参数为数组
你需要自行维护数组内部的键值对, 确保键值对符合规范格式
即: name=名字, classList=图标 -
addIconBefore(name,classList)
添加一个图标(在头部)
其他的就跟 addIcon 一样了 -
addIconsBefore(icons)
批量添加图标(在头部)
其它的就跟 addIcons 一样了