From 0d5d9ea5a93bf14ec5059336330177ee5f6c959e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=83=E5=BD=A9=E6=9E=AB=E5=8F=B6?= <424235748@qq.com>
Date: Sun, 30 Oct 2022 08:13:22 +0000
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=BA=90=20=E5=9C=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=AD=E6=96=B0=E5=A2=9E=E4=BA=86=201.=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E5=89=8D=E7=BC=80=20=E6=AF=94=E5=A6=82=EF=BC=9Alayui-icon?=
 =?UTF-8?q?=EF=BC=8Cpear-icon=202.=E6=96=B0=E5=A2=9E=E4=BA=86=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=9B=BE=E6=A0=87=E6=BA=90=EF=BC=8C=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E5=9C=A8=E5=89=8D=E7=AB=AF=E8=B0=83=E7=94=A8=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E5=80=99=EF=BC=8C=E6=8C=87=E5=AE=9A=E5=AD=97=E4=BD=93?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E6=96=87=E4=BB=B6=EF=BC=8C=E6=AF=94=E5=A6=82?=
 =?UTF-8?q?=EF=BC=9Apear/font/iconfont.css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用示例：
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#iconPicker',
            // 数据类型：fontClass/unicode，推荐使用fontClass
            type: 'fontClass',    //如果使用自定义，此项可以不写
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 16,
             //如果使用自定义图标，前缀和图标来源 是必填；否则请移除这两项，或留空
            // 前缀
            prefix:"pear-icon",
            // 自定义图标来源
            url:"../static/pear/font/iconfont.css",  //一定要确保这个url可以访问到
            // 点击回调
            click: function(data) {
                $('#iconPicker').val('tomato-icon ' + data.icon);
            },
            // 渲染成功后的回调
            // success: function(d) {
            //     console.log(d);
            // }
        });

Signed-off-by: 七彩枫叶 <424235748@qq.com>
---
 component/pear/module/iconPicker.js | 58 +++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 12 deletions(-)

diff --git a/component/pear/module/iconPicker.js b/component/pear/module/iconPicker.js
index bde668d..8d13e28 100644
--- a/component/pear/module/iconPicker.js
+++ b/component/pear/module/iconPicker.js
@@ -33,12 +33,19 @@ layui.define(['laypage', 'form'], function(exports) {
 			click = opts.click,
 			// 渲染成功后的回调
 			success = opts.success,
+			// 前缀 默认使用 layui-icon
+			ICON_prefix = opts.prefix == null ? "layui-icon" : opts.prefix,
+			// 异步获取外部字体图标数据
+			ICON_url = opts.url ,
 			// json数据
 			data = {},
 			// 唯一标识
 			tmp = new Date().getTime(),
 			// 是否使用的class数据
 			isFontClass = opts.type === 'fontClass',
+			// 是否使用自定义图标数据
+			isCustom = opts.url !=null && opts.prefix != null,
+
 			// 初始化时input的值
 			ORIGINAL_ELEM_VALUE = $(elem).val(),
 			TITLE = 'layui-select-title',
@@ -52,8 +59,12 @@ layui.define(['laypage', 'form'], function(exports) {
 
 		var a = {
 			init: function() {
-				data = common.getData[type]();
-
+				if(isCustom)
+				{
+					data = common.ajaxData(ICON_url,ICON_prefix);
+				}else{
+					data = common.getData[type]();
+				}
 				a.hideElem().createSelect().createBody().toggleSelect();
 				a.preventEvent().inputListen();
 				common.loadCss();
@@ -95,8 +106,8 @@ layui.define(['laypage', 'form'], function(exports) {
 					}
 				}
 
-				if (isFontClass) {
-					oriIcon = '<i class="layui-icon ' + ORIGINAL_ELEM_VALUE + '">';
+				if (isFontClass || isCustom) {
+					oriIcon = '<i class="'+ ICON_prefix + ' ' + ORIGINAL_ELEM_VALUE + '">';
 				} else {
 					oriIcon += ORIGINAL_ELEM_VALUE;
 				}
@@ -200,9 +211,10 @@ layui.define(['laypage', 'form'], function(exports) {
 					// 每个图标dom
 					var icon = '<div class="layui-iconpicker-icon-item" title="' + obj + '" ' +
 						style + '>';
-					if (isFontClass) {
-						icon += '<i class="layui-icon ' + obj + '"></i>';
-					} else {
+					if (isFontClass || isCustom)
+					{
+						icon += '<i class="'+ ICON_prefix + ' ' + obj + '"></i>';
+					}else{
 						icon += '<i class="layui-icon">' + obj.replace('amp;', '') + '</i>';
 					}
 					icon += '</div>';
@@ -312,13 +324,14 @@ layui.define(['laypage', 'form'], function(exports) {
 			check: function() {
 				var item = '#' + PICKER_BODY + ' .layui-iconpicker-icon-item';
 				a.event('click', item, function(e) {
-					var el = $(e.currentTarget).find('.layui-icon'),
+					var el = $(e.currentTarget).find('.' + ICON_prefix),
 						icon = '';
-					if (isFontClass) {
+					console.log( el.attr('class'));
+					if (isFontClass || isCustom) {
 						var clsArr = el.attr('class').split(/[\s\n]/),
 							cls = clsArr[1],
 							icon = cls;
-						$('#' + TITLE_ID).find('.layui-iconpicker-item .layui-icon').html(
+						$('#' + TITLE_ID).find('.layui-iconpicker-item .' + ICON_prefix).html(
 							'').attr('class', clsArr.join(' '));
 					} else {
 						var cls = el.html(),
@@ -354,7 +367,6 @@ layui.define(['laypage', 'form'], function(exports) {
 				$(BODY).on(evt, el, fn);
 			}
 		};
-
 		var common = {
 			/**
 			 * 加载样式表
@@ -460,7 +472,29 @@ layui.define(['laypage', 'form'], function(exports) {
 						"&amp;#xe606;", "&amp;#xe604;", "&amp;#xe600;", "&amp;#xe658;",
 						"&amp;#x1007;", "&amp;#x1006;", "&amp;#x1005;", "&amp;#xe608;"
 					];
-				}
+				},
+
+			},
+			//通过异步获取自定义图标数据源
+			ajaxData:function (url,prefix){
+				var iconlist = [];
+				$.ajax({
+					url: url,
+					type: 'get',
+					contentType: "application/x-www-form-urlencoded; charset=UTF-8",
+					async: false,
+					success: function (ret) {
+						var exp = eval("/"+prefix+"-(.*):/ig");
+						var result;
+						while ((result = exp.exec(ret)) != null) {
+							iconlist.push(prefix + '-' + result[1]);
+						}
+					},
+					error: function (xhr, textstatus, thrown) {
+						layer.msg('自定义图标接口有误');
+					}
+				});
+				return iconlist;
 			}
 		};
 
-- 
Gitee