iconPicker.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. /**
  2. * Layui图标选择器
  3. * @author wujiawei0926@yeah.net
  4. * @version 1.1
  5. */
  6. define(['jquery', 'layui'], function($, layui) {
  7. "use strict";
  8. var iconPicker = function() {
  9. this.v = '1.1';
  10. },
  11. _MOD = 'iconPicker',
  12. _this = this,
  13. laypage = layui.laypage,
  14. form = layui.form,
  15. BODY = 'body',
  16. TIPS = '请选择图标';
  17. /**
  18. * 渲染组件
  19. */
  20. iconPicker.render = function(options) {
  21. var opts = options,
  22. // DOM选择器
  23. elem = opts.elem,
  24. // 数据类型:fontClass/unicode
  25. type = opts.type == null ? 'fontClass' : opts.type,
  26. // 是否分页:true/false
  27. page = opts.page == null ? true : opts.page,
  28. // 每页显示数量
  29. limit = opts.limit == null ? 12 : opts.limit,
  30. // 是否开启搜索:true/false
  31. search = opts.search == null ? true : opts.search,
  32. // 每个图标格子的宽度:'43px'或'20%'
  33. cellWidth = opts.cellWidth,
  34. // 点击回调
  35. click = opts.click,
  36. // 渲染成功后的回调
  37. success = opts.success,
  38. // json数据
  39. data = {},
  40. // 唯一标识
  41. tmp = new Date().getTime(),
  42. // 初始化时input的值
  43. ORIGINAL_ELEM_VALUE = $(elem).val(),
  44. TITLE = 'layui-select-title',
  45. TITLE_ID = 'layui-select-title-' + tmp,
  46. ICON_BODY = 'layui-iconpicker-' + tmp,
  47. PICKER_BODY = 'layui-iconpicker-body-' + tmp,
  48. PAGE_ID = 'layui-iconpicker-page-' + tmp,
  49. LIST_BOX = 'layui-iconpicker-list-box',
  50. selected = 'layui-form-selected',
  51. unselect = 'layui-unselect';
  52. var a = {
  53. init: function() {
  54. data = common.getData[type]();
  55. a.hideElem().createSelect().createBody().toggleSelect();
  56. a.preventEvent().inputListen();
  57. common.loadCss();
  58. if (success) {
  59. success(this.successHandle());
  60. }
  61. return a;
  62. },
  63. successHandle: function() {
  64. var d = {
  65. options: opts,
  66. data: data,
  67. id: tmp,
  68. elem: $('#' + ICON_BODY)
  69. };
  70. return d;
  71. },
  72. /**
  73. * 隐藏elem
  74. */
  75. hideElem: function() {
  76. $(elem).hide();
  77. return a;
  78. },
  79. /**
  80. * 绘制select下拉选择框
  81. */
  82. createSelect: function() {
  83. var oriIcon = '<i class="iconfont">';
  84. // 默认图标
  85. if (ORIGINAL_ELEM_VALUE === '') {
  86. ORIGINAL_ELEM_VALUE = '';//默认值
  87. }
  88. oriIcon = '<i class="iconfont ' + ORIGINAL_ELEM_VALUE + '">';
  89. oriIcon += '</i>';
  90. var selectHtml = '<div class="layui-iconpicker layui-unselect layui-form-select" id="' + ICON_BODY + '">' +
  91. '<div class="' + TITLE + '" id="' + TITLE_ID + '">' +
  92. '<div class="layui-iconpicker-item">' +
  93. '<span class="layui-iconpicker-icon layui-unselect">' +
  94. oriIcon +
  95. '</span>' +
  96. '<i class="layui-edge"></i>' +
  97. '</div>' +
  98. '</div>' +
  99. '<div class="layui-anim layui-anim-upbit" style="">' +
  100. '123' +
  101. '</div>';
  102. $(elem).after(selectHtml);
  103. return a;
  104. },
  105. /**
  106. * 展开/折叠下拉框
  107. */
  108. toggleSelect: function() {
  109. var item = '#' + TITLE_ID + ' .layui-iconpicker-item,#' + TITLE_ID + ' .layui-iconpicker-item .layui-edge';
  110. a.event('click', item, function(e) {
  111. var $icon = $('#' + ICON_BODY);
  112. if ($icon.hasClass(selected)) {
  113. $icon.removeClass(selected).addClass(unselect);
  114. } else {
  115. // 隐藏其他picker
  116. $('.layui-form-select').removeClass(selected);
  117. // 显示当前picker
  118. $icon.addClass(selected).removeClass(unselect);
  119. }
  120. e.stopPropagation();
  121. });
  122. return a;
  123. },
  124. /**
  125. * 绘制主体部分
  126. */
  127. createBody: function() {
  128. // 获取数据
  129. var searchHtml = '';
  130. if (search) {
  131. searchHtml = '<div class="layui-iconpicker-search">' +
  132. '<input class="layui-input">' +
  133. '<i class="layui-icon layui-icon-search"></i>' +
  134. '</div>';
  135. }
  136. // 组合dom
  137. var bodyHtml = '<div class="layui-iconpicker-body" id="' + PICKER_BODY + '">' +
  138. searchHtml +
  139. '<div class="' + LIST_BOX + '"></div> ' +
  140. '</div>';
  141. $('#' + ICON_BODY).find('.layui-anim').eq(0).html(bodyHtml);
  142. a.search().createList().check().page();
  143. return a;
  144. },
  145. /**
  146. * 绘制图标列表
  147. * @param text 模糊查询关键字
  148. * @returns {string}
  149. */
  150. createList: function(text) {
  151. var d = data,
  152. l = d.length,
  153. pageHtml = '',
  154. listHtml = $('<div class="layui-iconpicker-list">') //'<div class="layui-iconpicker-list">';
  155. // 计算分页数据
  156. var _limit = limit, // 每页显示数量
  157. _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1), // 总计多少页
  158. _id = PAGE_ID;
  159. // 图标列表
  160. var icons = [];
  161. for (var i = 0; i < l; i++) {
  162. var obj = d[i];
  163. // 判断是否模糊查询
  164. if (text && obj.indexOf(text) === -1) {
  165. continue;
  166. }
  167. // 是否自定义格子宽度
  168. var style = '';
  169. if (cellWidth !== null) {
  170. style += ' style="width:' + cellWidth + '"';
  171. }
  172. // 每个图标dom
  173. var icon = '<div class="layui-iconpicker-icon-item" title="' + obj + '" ' + style + '>';
  174. icon += '<i class="iconfont ' + obj + '"></i>';
  175. icon += '</div>';
  176. icons.push(icon);
  177. }
  178. // 查询出图标后再分页
  179. l = icons.length;
  180. _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1);
  181. for (var i = 0; i < _pages; i++) {
  182. // 按limit分块
  183. var lm = $('<div class="layui-iconpicker-icon-limit" id="layui-iconpicker-icon-limit-' + tmp + (i + 1) + '">');
  184. for (var j = i * _limit; j < (i + 1) * _limit && j < l; j++) {
  185. lm.append(icons[j]);
  186. }
  187. listHtml.append(lm);
  188. }
  189. // 无数据
  190. if (l === 0) {
  191. listHtml.append('<p class="layui-iconpicker-tips">无数据</p>');
  192. }
  193. // 判断是否分页
  194. if (page) {
  195. $('#' + PICKER_BODY).addClass('layui-iconpicker-body-page');
  196. pageHtml = '<div class="layui-iconpicker-page" id="' + PAGE_ID + '">' +
  197. '<div class="layui-iconpicker-page-count">' +
  198. '<span id="' + PAGE_ID + '-current">1</span>/' +
  199. '<span id="' + PAGE_ID + '-pages">' + _pages + '</span>' +
  200. ' (<span id="' + PAGE_ID + '-length">' + l + '</span>)' +
  201. '</div>' +
  202. '<div class="layui-iconpicker-page-operate">' +
  203. '<i class="iconfont icon-arrow-left-s-line" id="' + PAGE_ID + '-prev" data-index="0" prev></i> ' +
  204. '<i class="iconfont icon-arrow-right-s-line" id="' + PAGE_ID + '-next" data-index="2" next></i> ' +
  205. '</div>' +
  206. '</div>';
  207. }
  208. $('#' + ICON_BODY).find('.layui-anim').find('.' + LIST_BOX).html('').append(listHtml).append(pageHtml);
  209. return a;
  210. },
  211. // 阻止Layui的一些默认事件
  212. preventEvent: function() {
  213. var item = '#' + ICON_BODY + ' .layui-anim';
  214. a.event('click', item, function(e) {
  215. e.stopPropagation();
  216. });
  217. return a;
  218. },
  219. // 分页
  220. page: function() {
  221. var icon = '#' + PAGE_ID + ' .layui-iconpicker-page-operate .iconfont';
  222. $(icon).unbind('click');
  223. a.event('click', icon, function(e) {
  224. var elem = e.currentTarget,
  225. total = parseInt($('#' + PAGE_ID + '-pages').html()),
  226. isPrev = $(elem).attr('prev') !== undefined,
  227. // 按钮上标的页码
  228. index = parseInt($(elem).attr('data-index')),
  229. $cur = $('#' + PAGE_ID + '-current'),
  230. // 点击时正在显示的页码
  231. current = parseInt($cur.html());
  232. // 分页数据
  233. if (isPrev && current > 1) {
  234. current = current - 1;
  235. $(icon + '[prev]').attr('data-index', current);
  236. } else if (!isPrev && current < total) {
  237. current = current + 1;
  238. $(icon + '[next]').attr('data-index', current);
  239. }
  240. $cur.html(current);
  241. // 图标数据
  242. $('#' + ICON_BODY + ' .layui-iconpicker-icon-limit').hide();
  243. $('#layui-iconpicker-icon-limit-' + tmp + current).show();
  244. e.stopPropagation();
  245. });
  246. return a;
  247. },
  248. /**
  249. * 搜索
  250. */
  251. search: function() {
  252. var item = '#' + PICKER_BODY + ' .layui-iconpicker-search .layui-input';
  253. a.event('input propertychange', item, function(e) {
  254. var elem = e.target,
  255. t = $(elem).val();
  256. a.createList(t);
  257. });
  258. return a;
  259. },
  260. /**
  261. * 点击选中图标
  262. */
  263. check: function() {
  264. var item = '#' + PICKER_BODY + ' .layui-iconpicker-icon-item';
  265. a.event('click', item, function(e) {
  266. var el = $(e.currentTarget).find('.iconfont'),
  267. icon = '';
  268. var clsArr = el.attr('class').split(/[\s\n]/),
  269. cls = clsArr[1],
  270. icon = 'iconfont ' + cls;
  271. $('#' + TITLE_ID).find('.layui-iconpicker-item .iconfont').html('').attr('class', clsArr.join(' '));
  272. $('#' + ICON_BODY).removeClass(selected).addClass(unselect);
  273. $(elem).val(icon).attr('value', icon);
  274. // 回调
  275. if (click) {
  276. click({
  277. icon: icon
  278. });
  279. }
  280. });
  281. return a;
  282. },
  283. // 监听原始input数值改变
  284. inputListen: function() {
  285. var el = $(elem);
  286. a.event('change', elem, function() {
  287. var value = el.val();
  288. })
  289. // el.change(function(){
  290. // });
  291. return a;
  292. },
  293. event: function(evt, el, fn) {
  294. $(BODY).on(evt, el, fn);
  295. }
  296. };
  297. var common = {
  298. /**
  299. * 加载样式表
  300. */
  301. loadCss: function() {
  302. var css = '.layui-iconpicker {max-width: 280px;}.layui-iconpicker .layui-anim{display:none;position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;}.layui-iconpicker-item{border:1px solid #e6e6e6;width:90px;height:38px;border-radius:4px;cursor:pointer;position:relative;}.layui-iconpicker-icon{border-right:1px solid #e6e6e6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:60px;height:100%;float:left;text-align:center;background:#fff;transition:all .3s;}.layui-iconpicker-icon i{line-height:38px;font-size:18px;}.layui-iconpicker-item > .layui-edge{left:70px;}.layui-iconpicker-item:hover{border-color:#D2D2D2!important;}.layui-iconpicker-item:hover .layui-iconpicker-icon{border-color:#D2D2D2!important;}.layui-iconpicker.layui-form-selected .layui-anim{display:block;}.layui-iconpicker-body{padding:6px;}.layui-iconpicker .layui-iconpicker-list{background-color:#fff;border:1px solid #ccc;border-radius:4px;}.layui-iconpicker .layui-iconpicker-icon-item{display:inline-block;width:21.1%;line-height:36px;text-align:center;cursor:pointer;vertical-align:top;height:36px;margin:4px;border:1px solid #ddd;border-radius:2px;transition:300ms;}.layui-iconpicker .layui-iconpicker-icon-item i.iconfont{font-size:17px;}.layui-iconpicker .layui-iconpicker-icon-item:hover{background-color:#eee;border-color:#ccc;-webkit-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;-moz-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;box-shadow:0 0 2px #aaa,0 0 2px #fff inset;text-shadow:0 0 1px #fff;}.layui-iconpicker-search{position:relative;margin:0 0 6px 0;border:1px solid #e6e6e6;border-radius:2px;transition:300ms;}.layui-iconpicker-search:hover{border-color:#D2D2D2!important;}.layui-iconpicker-search .layui-input{cursor:text;display:inline-block;width:86%;border:none;padding-right:0;margin-top:1px;}.layui-iconpicker-search .iconfont{position:absolute;top:11px;right:4%;}.layui-iconpicker-tips{text-align:center;padding:8px 0;cursor:not-allowed;}.layui-iconpicker-page{margin-top:6px;margin-bottom:-6px;font-size:12px;padding:0 2px;}.layui-iconpicker-page-count{display:inline-block;}.layui-iconpicker-page-operate{display:inline-block;float:right;cursor:default;}.layui-iconpicker-page-operate .iconfont{font-size:12px;cursor:pointer;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit{display:none;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit:first-child{display:block;}';
  303. var $style = $('head').find('style[iconpicker]');
  304. if ($style.length === 0) {
  305. $('head').append('<style rel="stylesheet" iconpicker>' + css + '</style>');
  306. }
  307. },
  308. /**
  309. * 获取数据
  310. */
  311. getData: {
  312. fontClass: function() {
  313. var arr = ["icon-fullscreen-exit-fill","icon-fullscreen-exit-line","icon-fullscreen-fill","icon-fullscreen-line","icon-home-4-line","icon-home-4-fill","icon-global-fill","icon-global-line","icon-file-forbid-fill","icon-file-forbid-line","icon-file-info-fill","icon-file-info-line","icon-file-unknow-fill","icon-file-unknow-line","icon-file-warning-fill","icon-file-warning-line","icon-filter-3-fill","icon-filter-3-line","icon-filter-2-line","icon-filter-2-fill","icon-filter-fill","icon-filter-line","icon-award-fill","icon-award-line","icon-calculator-line","icon-calculator-fill","icon-cloud-fill","icon-cloud-line","icon-slideshow-2-fill","icon-slideshow-3-line","icon-slideshow-3-fill","icon-slideshow-fill","icon-slideshow-2-line","icon-slideshow-line","icon-mic-line","icon-mic-fill","icon-moon-cloudy-fill","icon-moon-cloudy-line","icon-ping-pong-fill","icon-ping-pong-line","icon-run-fill","icon-run-line","icon-scissors-2-fill","icon-scissors-2-line","icon-scissors-fill","icon-scissors-line","icon-survey-fill","icon-survey-line","icon-task-fill","icon-task-line","icon-pause-fill","icon-pause-line","icon-stop-fill","icon-stop-line","icon-user-3-fill","icon-user-3-line","icon-search-fill","icon-search-line","icon-question-fill","icon-question-line","icon-alert-fill","icon-alert-line","icon-battery-2-charge-fill","icon-battery-2-charge-line","icon-computer-fill","icon-computer-line","icon-cpu-fill","icon-cpu-line","icon-dashboard-3-fill","icon-dashboard-3-line","icon-instance-line","icon-instance-fill","icon-server-fill","icon-server-line","icon-bookmark-fill","icon-bookmark-line","icon-price-tag-3-fill","icon-price-tag-3-line","icon-bus-fill","icon-bus-line","icon-car-fill","icon-car-line","icon-e-bike-2-fill","icon-e-bike-2-line","icon-gas-station-fill","icon-gas-station-line","icon-train-fill","icon-train-line","icon-plane-fill","icon-plane-line","icon-hourglass-fill","icon-hourglass-line","icon-menu-add-fill","icon-menu-add-line","icon-menu-fill","icon-menu-line","icon-lightbulb-flash-line","icon-lightbulb-line","icon-plug-fill","icon-plug-line","icon-scales-3-line","icon-scales-3-fill","icon-collapse-diagonal-2-fill","icon-book-shelf-line","icon-collapse-diagonal-2-line","icon-collapse-horizontal-fill","icon-collapse-horizontal-line","icon-collapse-vertical-fill","icon-collapse-vertical-line","icon-expand-diagonal-2-line","icon-expand-diagonal-2-fill","icon-expand-horizontal-fill","icon-expand-horizontal-line","icon-expand-vertical-fill","icon-book-shelf-fill","icon-expand-vertical-line","icon-chat-1-fill","icon-chat-1-line","icon-chat-thread-fill","icon-chat-thread-line","icon-javascript-fill","icon-javascript-line","icon-links-fill","icon-links-line","icon-link-m","icon-link-unlink-m","icon-external-link-fill","icon-external-link-line","icon-loop-left-fill","icon-loop-left-line","icon-shut-down-fill","icon-shut-down-line","icon-pushpin-fill","icon-pushpin-line","icon-id-card-fill","icon-id-card-line","icon-contacts-book-fill","icon-contacts-book-line","icon-bank-card-fill","icon-bank-card-line","icon-lock-unlock-fill","icon-lock-unlock-line","icon-collapse-diagonal-fill","icon-collapse-diagonal-line","icon-expand-diagonal-line","icon-expand-diagonal-fill","icon-robot-2-fill","icon-robot-2-line","icon-bluetooth-fill","icon-bluetooth-line","icon-seedling-fill","icon-seedling-line","icon-sun-foggy-fill","icon-sun-foggy-line","icon-thumb-down-fill","icon-thumb-down-line","icon-thumb-up-fill","icon-thumb-up-line","icon-walk-fill","icon-walk-line","icon-wifi-line","icon-wifi-fill","icon-windows-fill","icon-windows-line","icon-edit-box-fill","icon-edit-box-line","icon-file-copy-fill","icon-file-copy-line","icon-folder-2-fill","icon-folder-2-line","icon-hotel-bed-fill","icon-hotel-bed-line","icon-nurse-fill","icon-nurse-line","icon-pantone-fill","icon-pantone-line","icon-restaurant-fill","icon-restaurant-line","icon-rss-line","icon-rss-fill","icon-bill-fill","icon-bill-line","icon-subtract-fill","icon-subtract-line","icon-team-fill","icon-team-line","icon-wallet-fill","icon-wallet-line","icon-list-check","icon-list-unordered","icon-list-ordered","icon-reply-fill","icon-reply-line","icon-send-plane-fill","icon-send-plane-line","icon-delete-bin-fill","icon-delete-bin-line","icon-list-settings-line","icon-list-settings-fill","icon-terminal-box-fill","icon-terminal-box-line","icon-more-2-line","icon-more-2-fill","icon-more-line","icon-more-fill","icon-emotion-happy-fill","icon-emotion-happy-line","icon-article-fill","icon-article-line","icon-profile-fill","icon-profile-line","icon-arrow-go-forward-fill","icon-arrow-go-forward-line","icon-image-fill","icon-image-line","icon-bug-line","icon-bug-fill","icon-attachment-fill","icon-attachment-line","icon-check-fill","icon-check-line","icon-checkbox-circle-fill","icon-checkbox-circle-line","icon-close-circle-fill","icon-close-circle-line","icon-indeterminate-circle-fill","icon-indeterminate-circle-line","icon-information-fill","icon-information-line","icon-key-2-line","icon-key-2-fill","icon-message-3-fill","icon-message-3-line","icon-play-fill","icon-play-line","icon-question-answer-fill","icon-question-answer-line","icon-save-fill","icon-save-line","icon-arrow-down-fill","icon-arrow-down-line","icon-arrow-left-fill","icon-arrow-left-line","icon-arrow-right-fill","icon-arrow-right-line","icon-arrow-up-fill","icon-arrow-up-line","icon-crop-fill","icon-crop-line","icon-heart-fill","icon-heart-line","icon-history-fill","icon-history-line","icon-download-cloud-2-line","icon-download-cloud-2-fill","icon-upload-cloud-2-fill","icon-upload-cloud-2-line","icon-video-fill","icon-video-line","icon-arrow-left-s-fill","icon-arrow-left-s-line","icon-arrow-right-s-fill","icon-arrow-right-s-line","icon-map-pin-fill","icon-map-pin-line","icon-settings-4-fill","icon-settings-4-line","icon-share-fill","icon-share-line","icon-arrow-go-back-line","icon-arrow-go-back-fill","icon-lock-fill","icon-lock-line","icon-vip-crown-2-fill","icon-vip-crown-2-line","icon-close-fill","icon-close-line","icon-men-fill","icon-men-line","icon-flag-2-fill","icon-flag-2-line","icon-time-line","icon-time-fill","icon-volume-up-fill","icon-volume-up-line","icon-women-fill","icon-women-line","icon-add-fill","icon-add-line","icon-at-line","icon-at-fill","icon-medal-fill","icon-medal-line","icon-vidicon-fill","icon-vidicon-line","icon-donut-chart-fill","icon-donut-chart-line","icon-line-chart-fill","icon-line-chart-line","icon-pie-chart-2-fill","icon-pie-chart-2-line","icon-printer-fill","icon-printer-line","icon-stack-fill","icon-stack-line","icon-window-fill","icon-window-line","icon-barcode-line","icon-barcode-fill","icon-code-s-slash-fill","icon-code-s-slash-line","icon-coupon-line","icon-coupon-fill","icon-download-2-line","icon-download-2-fill","icon-drag-move-2-fill","icon-drag-move-2-line","icon-eye-close-fill","icon-eye-fill","icon-eye-close-line","icon-eye-line","icon-eye-off-fill","icon-eye-off-line","icon-fingerprint-line","icon-fingerprint-fill","icon-map-fill","icon-map-2-line","icon-mini-program-line","icon-mini-program-fill","icon-movie-2-fill","icon-movie-2-line","icon-music-2-fill","icon-music-2-line","icon-notification-3-line","icon-notification-3-fill","icon-notification-4-fill","icon-notification-4-line","icon-qr-code-fill","icon-qr-code-line","icon-qr-scan-2-fill","icon-qr-scan-2-line","icon-red-packet-fill","icon-red-packet-line","icon-riding-fill","icon-riding-line","icon-rocket-2-fill","icon-rocket-2-line","icon-shape-2-fill","icon-shape-2-line","icon-shape-fill","icon-shape-line","icon-shield-keyhole-line","icon-shield-keyhole-fill","icon-shopping-bag-fill","icon-shopping-bag-line","icon-sound-module-fill","icon-sound-module-line","icon-stock-fill","icon-stock-line","icon-t-shirt-fill","icon-t-shirt-line","icon-table-fill","icon-table-line","icon-takeaway-fill","icon-takeaway-line","icon-taxi-fill","icon-taxi-line","icon-truck-fill","icon-truck-line","icon-zoom-in-line","icon-zoom-out-fill","icon-zoom-out-line","icon-zoom-in-fill","icon-hospital-fill","icon-hospital-line","icon-store-line","icon-store-fill","icon-advertisement-line","icon-advertisement-fill","icon-archive-line","icon-archive-fill","icon-bar-chart-fill","icon-bar-chart-grouped-line","icon-bar-chart-2-line","icon-bar-chart-grouped-fill","icon-bar-chart-horizontal-fill","icon-bar-chart-horizontal-line","icon-bubble-chart-fill","icon-bubble-chart-line","icon-qq-fill","icon-qq-line","icon-alipay-fill","icon-alipay-line","icon-translate-2","icon-translate","icon-baidu-fill","icon-baidu-line","icon-dingding-fill","icon-dingding-line","icon-github-fill","icon-github-line","icon-taobao-fill","icon-taobao-line","icon-wechat-2-fill","icon-wechat-2-line","icon-wechat-pay-fill","icon-wechat-fill","icon-wechat-line","icon-wechat-pay-line","icon-sina-fill","icon-sina-line","icon-calendar-2-fill","icon-calendar-2-line","icon-calendar-check-fill","icon-calendar-check-line","icon-recycle-fill","icon-recycle-line","icon-money","icon-upload2-fill","icon-upload2-line","icon-upload-fill","icon-upload-line","icon-tools-fill","icon-tools-line","icon-database-2-line","icon-database-2-fill","icon-file-fill","icon-file-line","icon-file-list-3-fill","icon-file-list-3-line","icon-file-paper-2-fill","icon-file-paper-2-line","icon-file-shield-2-fill","icon-file-shield-2-line","icon-gift-fill","icon-money-cny-box-line","icon-gift-line","icon-money-cny-box-fill","icon-history","icon-history-filling","icon-file-settings-fill","icon-file-settings-line","icon-user-fill","icon-user-line","icon-shield-user-fill","icon-shield-user-line","icon-user-unfollow-fill","icon-user-unfollow-line","icon-user-add-fill","icon-user-add-line","icon-user-heart-line","icon-user-heart-fill","icon-user-shared-2-fill","icon-user-shared-2-line","icon-user-star-fill","icon-user-star-line","icon-mail-add-line","icon-mail-check-fill","icon-mail-check-line","icon-mail-add-fill","icon-mail-close-line","icon-mail-download-line","icon-mail-close-fill","icon-mail-fill","icon-mail-forbid-fill","icon-mail-line","icon-mail-forbid-line","icon-mail-lock-fill","icon-mail-download-fill","icon-mail-lock-line","icon-mail-open-fill","icon-mail-open-line","icon-mail-send-line","icon-mail-send-fill","icon-mail-settings-line","icon-mail-star-line","icon-mail-star-fill","icon-mail-unread-line","icon-mail-unread-fill","icon-mail-volume-line","icon-mail-settings-fill","icon-mail-volume-fill","icon-edit-2-fill","icon-edit-2-line","icon-file-code-fill","icon-file-code-line","icon-reactjs-line","icon-reactjs-fill","icon-logout-box-line","icon-logout-box-r-line","icon-group-fill","icon-group-line","icon-user-settings-line","icon-user-settings-fill","icon-palette-fill","icon-palette-line","icon-git-branch-fill","icon-git-branch-line","icon-book-2-fill","icon-book-2-line","icon-book-open-fill","icon-book-open-line","icon-vip-fill","icon-vip-line","icon-equalizer-fill","icon-equalizer-line","icon-draft-fill","icon-draft-line","icon-apps-fill","icon-apps-line","icon-alarm-fill","icon-alarm-line","icon-circle-fill","icon-circle-line","icon-vip1","icon-lianjie"];
  314. return arr;
  315. }
  316. }
  317. };
  318. a.init();
  319. return new iconPicker();
  320. };
  321. /**
  322. * 选中图标
  323. * @param filter lay-filter
  324. * @param iconName 图标名称,自动识别fontClass/unicode
  325. */
  326. iconPicker.checkIcon = function(filter, iconName) {
  327. var el = $('*[lay-filter=' + filter + ']'),
  328. p = el.next().find('.layui-iconpicker-item .iconfont'),
  329. c = 'iconfont ' + iconName;
  330. p.html('').attr('class', c);
  331. el.attr('value', c).val(c);
  332. };
  333. return iconPicker;
  334. });