IconPiker图标选择器

分享 未结 28 2145
无求丶
无求丶 2018-9-29
悬赏:20飞吻
向大家推荐一个Layui的图标选择器: https://fly.layui.com/extend/iconPicker/




之前的一些bug都修复过来了,欢迎各位测试发现新问题,有好的建议也会努力实现。
另外,treeSelect.js也在修复bug了,时间充足的话可能会重构。
回帖
  • 请问楼主这个是自动取layui内置的icon吗?如果有额外扩展的字符图标,会自动检索到吗,还是如何能加进去?
    0 回复
  • 无求丶
    2018-9-29
    @一鸣童鞋 内置的是2.4.*的图标,如果后面有新的图标的话,需要自己手动添加,代码在:

    0 回复
  • IBean
    2018-9-30
    @无求丶 大佬我改了一下你的代码,icon基于2.4.3,鼠标悬停不再以title显示,而是通过tip显示icon中文名称
    代码给大佬,觉得可以的话可以更新一下(ps:遇到一个问题,传入分页的数值,但是处理的时候依旧是12默认值,不知道咋回事)
    ------------------这个代码是tips提示---------------
    $('body').on('mouseenter', '*[lay-icon-tips]', function() {
    var tipText = $(this).attr('lay-icon-tips');
    var dt = $(this).attr('lay-icon-direction');
    layer.tips(tipText, this, {
    tips: dt || 1,
    time: -1
    });
    }).on('mouseleave', '*[lay-icon-tips]', function() {
    layer.closeAll('tips');
    });

    ----------------这个代码是中文名称---------------
    var CNNAME = ["半星", "星星-空心", "星星-实心", "手机", "验证码", "微信", "QQ", "微博", "密码", "用户名", "刷新-粗", "授权", "左向右伸缩菜单", "右向左伸缩菜单", "雪花", "提示说明", "便签", "主页", "高级", "刷新", "刷新", "旗帜", "主题", "消息-通知", "网站", "控制台", "表情-惊讶", "设置-空心", "模板", "应用", "模板", "赞", "踩", "男", "女", "相机-空心", "相机-实心", "菜单-水平", "菜单-垂直", "金额-人民币", "金额-美元", "钻石-等级", "火", "返回", "位置-地图", "办公-阅读", "调查", "表情-微笑", "表情-哭泣", "购物车", "购物车", "下一页", "上一页", "上传-空心-拖拽", "上传-实心", "下载-圆圈", "组件", "文件-粗", "用户", "发现-实心", "loading", "loading-1", "添加", "播放", "暂停", "音频-耳机", "视频", "语音-声音", "消息-通知-喇叭", "删除线", "代码", "HTML", "字体加粗", "删除链接", "图片", "链接", "表情-笑-粗", "左对齐", "右对齐", "居中对齐", "字体-下划线", "字体-斜体", "Tabs 选项卡", "单选框-选中", "单选框-候选", "编辑", "分享", "删除", "表单", "手机-细体", "聊天 对话 沟通", "文字格式化", "窗口", "日期", "水 下雨", "代码-圆圈", "轮播组图", "翻页", "布局", "工具", "选择模板", "上传-圆圈", "树", "表格", "图表", "图标 报表 屏幕", "引擎", "下三角", "右三角", "文件", "设置-小型", "添加-圆圈", "404", "关于", "箭头 向上", "箭头 向下", "箭头 向左", "箭头 向右", "圆点", "搜索", "设置-实心", "群组", "好友", "回复 评论 实心", "菜单 隐身 实心", "记录", "图片-细体", "表情-笑-细体", "列表", "发布 纸飞机", "对 OK", "帮助", "客服", "top 置顶", "收藏-空心", "收藏-实心", "关闭-实心", "关闭-空心", "正确", "添加-圆圈-细"];

    ---------------这个是对应的-------------应该不会有差别
    var arr = ["layui-icon-rate-half", "layui-icon-rate", "layui-icon-rate-solid", "layui-icon-cellphone", "layui-icon-vercode", "layui-icon-login-wechat", "layui-icon-login-qq", "layui-icon-login-weibo", "layui-icon-password", "layui-icon-username", "layui-icon-refresh-3", "layui-icon-auz", "layui-icon-spread-left", "layui-icon-shrink-right", "layui-icon-snowflake", "layui-icon-tips", "layui-icon-note", "layui-icon-home", "layui-icon-senior", "layui-icon-refresh", "layui-icon-refresh-1", "layui-icon-flag", "layui-icon-theme", "layui-icon-notice", "layui-icon-website", "layui-icon-console", "layui-icon-face-surprised", "layui-icon-set", "layui-icon-template-1", "layui-icon-app", "layui-icon-template", "layui-icon-praise", "layui-icon-tread", "layui-icon-male", "layui-icon-female", "layui-icon-camera", "layui-icon-camera-fill", "layui-icon-more", "layui-icon-more-vertical", "layui-icon-rmb", "layui-icon-dollar", "layui-icon-diamond", "layui-icon-fire", "layui-icon-return", "layui-icon-location", "layui-icon-read", "layui-icon-survey", "layui-icon-face-smile", "layui-icon-face-cry", "layui-icon-cart-simple", "layui-icon-cart", "layui-icon-next", "layui-icon-prev", "layui-icon-upload-drag", "layui-icon-upload", "layui-icon-download-circle", "layui-icon-component", "layui-icon-file-b", "layui-icon-user", "layui-icon-find-fill", "layui-icon-loading", "layui-icon-loading-1", "layui-icon-add-1", "layui-icon-play", "layui-icon-pause", "layui-icon-headset", "layui-icon-video", "layui-icon-voice", "layui-icon-speaker", "layui-icon-fonts-del", "layui-icon-fonts-code", "layui-icon-fonts-html", "layui-icon-fonts-strong", "layui-icon-unlink", "layui-icon-picture", "layui-icon-link", "layui-icon-face-smile-b", "layui-icon-align-left", "layui-icon-align-right", "layui-icon-align-center", "layui-icon-fonts-u", "layui-icon-fonts-i", "layui-icon-tabs", "layui-icon-radio", "layui-icon-circle", "layui-icon-edit", "layui-icon-share", "layui-icon-delete", "layui-icon-form", "layui-icon-cellphone-fine", "layui-icon-dialogue", "layui-icon-fonts-clear", "layui-icon-layer", "layui-icon-date", "layui-icon-water", "layui-icon-code-circle", "layui-icon-carousel", "layui-icon-prev-circle", "layui-icon-layouts", "layui-icon-util", "layui-icon-templeate-1", "layui-icon-upload-circle", "layui-icon-tree", "layui-icon-table", "layui-icon-chart", "layui-icon-chart-screen", "layui-icon-engine", "layui-icon-triangle-d", "layui-icon-triangle-r", "layui-icon-file", "layui-icon-set-sm", "layui-icon-add-circle", "layui-icon-404", "layui-icon-about", "layui-icon-up", "layui-icon-down", "layui-icon-left", "layui-icon-right", "layui-icon-circle-dot", "layui-icon-search", "layui-icon-set-fill", "layui-icon-group", "layui-icon-friends", "layui-icon-reply-fill", "layui-icon-menu-fill", "layui-icon-log", "layui-icon-picture-fine", "layui-icon-face-smile-fine", "layui-icon-list", "layui-icon-release", "layui-icon-ok", "layui-icon-help", "layui-icon-chat", "layui-icon-top", "layui-icon-star", "layui-icon-star-fill", "layui-icon-close-fill", "layui-icon-close", "layui-icon-ok-circle", "layui-icon-add-circle-fine"];

    ******************************************************************************************

    ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "ဇ", "ဆ", "စ", ""];

    -----------------------------每个图片DOM---------------------------
    // 每个图标dom
    var icon = '<div class="layui-iconpicker-icon-item" lay-icon-tips="' + CNNAME[i] + '">';
    0 回复
  • IBean
    2018-9-30
    lay-icon-direction=""

    1 - 上面,默认,可以不写
    2 - 右边
    3 - 下面
    4 - 左边
    0 回复
  • IBean
    2018-9-30
    unicode数组的amp被系统河蟹了
    0 回复
  • IBean
    2018-9-30
    https://pan.baidu.com/s/1pz9vpQ3NNhqJCwIab2KUGg,iconPicker.js我改后的js
    0 回复
  • IBean
    2018-9-30
    https://pan.baidu.com/s/1iGDLJi1bJopi89LikOoseA
    新地址:加了 查询支持中文和英文模糊
    0 回复
  • 屮你
    2018-11-14
    @IBean
    limit = opts.limit ==null ? 12 : opts.limit,
    0 回复
  • 屮你
    2018-11-15
    当数据类型type:unicode时候 点击获取不到正确的值,将 icon += '<i class="layui-icon" >' + obj.replace('amp;', '') + '</i>';标签中加入 data-icon="' + obj + '"
    获取方式由var cls = el.html(),
    改为var cls = el[0].dataset.icon;


    需要赋值默认图标
    //默认图标
    Icon = $(elem).val() == '' ? '' : $(elem).val(),

    将绘制的地方修改
    // '<i class="layui-icon"></i>' +
    '<i class="layui-icon">' + Icon + '</i>' +
    如果楼主有时间可以更新下,如果其他有需求的同行可以看了楼主源码没有更新 可以按照以上修改,
    在此感谢楼主
    0 回复
  • 屮你
    2018-11-15
    // '<i class="layui-icon">&map#xe617;</i>' +
    '<i class="layui-icon">' + IconMap + '</i>' +
    没有图标字符了,
    0 回复