开源软件名称:Layui-IconPicker
开源软件地址:https://gitee.com/wujiawei0926/iconpicker
开源软件介绍:
LayUI拓展组件:IconPicker图标选择器项目介绍基于Layui的图标选择器,支持查询、分页、点击回调、渲染成功后回调等功能,提供手动选择图标事件。注:图标来自于Layui2.4.1 效果图使用示例 默认图标: <input type="text" id="iconPicker" lay-filter="iconPicker" style="display:none;"> 自定义图标: <input type="text" id="iconPicker2" lay-filter="iconPicker2" value="layui-icon-face-smile-fine" style="display:none;"> layui.use(['iconPicker'], function () { var iconPicker = layui.iconPicker; iconPicker.render({ // 选择器,推荐使用input elem: '#iconPicker', // 数据类型:fontClass/unicode,推荐使用fontClass type: 'fontClass', // 是否开启搜索:true/false,默认true search: true, // 是否开启分页:true/false,默认true page: true, // 每页显示数量,默认12 limit: 12, // 每个图标格子的宽度:'43px'或'20%' cellWidth: '43px', // 点击回调 click: function (data) { console.log(data); } // 渲染成功后的回调 success: function(d) { console.log(d); } }); /** * 选中图标 (常用于更新时默认选中图标) * @param filter lay-filter * @param iconName 图标名称,自动识别fontClass/unicode */ iconPicker.checkIcon('iconPicker', 'layui-icon-star-fill'); }); ps. iconPicker.js文件在module/iconPicker目录中 更新日志- 2019.04.17:
- 添加更多演示到demo.html
- 修复checkIcon后input值不改变的bug
- 2018.09.25:
- 添加演示页面demo.html
- 添加无数据提示
- 修复下拉三角无法点击的bug
- 修复点击搜索输入框后选择器关闭的bug
- 添加渲染成功后的回调
- 其他的优化
- 支持修改默认图标:修改方式,给原始input添加value属性,需要与type保持统一
注意事项- 推荐使用fontClass
- 可以再需要渲染的元素上添加
style="display:none;" ,保证原始元素不被显示 |
请发表评论