1 Star 0 Fork 39

陨落人间 / Layui-IconPicker

forked from wujiawei0926 / Layui-IconPicker 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 2.40 KB
一键复制 编辑 原始数据 按行查看 历史
wujiawei0926@yeah.net 提交于 2018-09-25 12:05 . 支持修改默认图标

LayUI拓展组件:IconPicker图标选择器

项目介绍

基于Layui的图标选择器,支持查询、分页、点击回调、渲染成功后回调等功能,提供手动选择图标事件。注:图标来自于Layui2.4.1

效果图

输入图片说明 输入图片说明 输入图片说明

使用示例

   默认图标:
   <input type="text" id="iconPicker" lay-filter="iconPicker" class="layui-input">

   自定义图标:
   <input type="text" id="iconPicker2" value="layui-icon-face-smile-fine" lay-filter="iconPicker2" class="layui-input">
    layui.use(['iconPicker'], function () {
        var iconPicker = layui.iconPicker;
            
            iconPicker.render({
                // 选择器,推荐使用input
                elem: '#iconPicker',
                // 数据类型:fontClass/unicode,推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索:true/false
                search: true,
                // 是否开启分页
                page: true,
                // 每页显示数量,默认12
                limit: 12,
                // 点击回调
                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目录中

更新日志

  • 2018.09.25:
    • 添加演示页面demo.html
    • 添加无数据提示
    • 修复下拉三角无法点击的bug
    • 修复点击搜索输入框后选择器关闭的bug
    • 添加渲染成功后的回调
    • 其他的优化
    • 支持修改默认图标:修改方式,给原始input添加value属性,需要与type保持统一

注意事项

  1. 推荐使用fontClass
JavaScript
1
https://gitee.com/im286er/iconpicker.git
git@gitee.com:im286er/iconpicker.git
im286er
iconpicker
Layui-IconPicker
master

搜索帮助