From 8ff747f0119b8349de5a4820a2ce4546b3fb4cff Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Sun, 4 Jul 2021 01:09:37 +0800
Subject: [PATCH] =?UTF-8?q?'admin-21.07.04:=E4=BF=AE=E5=A4=8D=E5=9B=BE?=
 =?UTF-8?q?=E6=A0=87=E9=80=89=E6=8B=A9=E5=99=A8=E5=8F=8C=E5=90=91=E7=BB=91?=
 =?UTF-8?q?=E5=AE=9A=E5=9B=9E=E6=98=BE=E3=80=81=E8=B7=AF=E7=94=B1=E5=BC=95?=
 =?UTF-8?q?=E5=85=A5=E7=AC=AC=E4=B8=89=E6=96=B9icon=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=A1=A8=E7=8E=B0=E4=B8=8D=E4=B8=80=E8=87=B4=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98=EF=BC=8C=E6=84=9F=E8=B0=A2=E7=BE=A4=E5=8F=8B@?=
 =?UTF-8?q?=E4=BC=AF=E7=89=99=E5=B7=B2=E9=81=87=E9=92=9F=E5=AD=90=E6=9C=9F?=
 =?UTF-8?q?=E3=80=81@=E5=80=9F=E4=B8=AA=E5=BE=AE=E7=AC=91=E4=B8=B6'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/iconSelector/index.vue | 57 +++++++++++++++------------
 src/theme/element.scss                | 18 +--------
 src/theme/mixins/mixins.scss          | 11 ++++++
 src/utils/getStyleSheets.ts           |  6 +--
 4 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/src/components/iconSelector/index.vue b/src/components/iconSelector/index.vue
index 27fce86..68feae0 100644
--- a/src/components/iconSelector/index.vue
+++ b/src/components/iconSelector/index.vue
@@ -4,18 +4,19 @@
 			<template #reference>
 				<el-input
 					v-model="fontIconSearch"
-					:placeholder="placeholder"
+					:placeholder="fontIconPlaceholder"
 					:clearable="clearable"
 					:disabled="disabled"
 					:size="size"
 					ref="inputWidthRef"
 					@clear="onClearFontIcon"
-					@input="onIconInput"
+					@focus="onIconFocus"
+					@blur="onIconBlur"
 				>
 					<template #prepend>
 						<i
 							:class="[
-								fontIconIndex === '' ? prepend : fontIconPrefix,
+								fontIconPrefix === '' ? prepend : fontIconPrefix,
 								{ iconfont: fontIconTabsIndex === 0 },
 								{ ele: fontIconTabsIndex === 1 },
 								{ fa: fontIconTabsIndex === 2 },
@@ -31,8 +32,8 @@
 					<div class="icon-selector-warp-row">
 						<el-scrollbar>
 							<el-row :gutter="10" v-if="fontIconSheetsFilterList.length > 0">
-								<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" @click="onColClick(v, k)" v-for="(v, k) in fontIconSheetsFilterList" :key="k">
-									<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconIndex === k }">
+								<el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4" @click="onColClick(v)" v-for="(v, k) in fontIconSheetsFilterList" :key="k">
+									<div class="icon-selector-warp-item" :class="{ 'icon-selector-active': fontIconPrefix === v }">
 										<div class="flex-margin">
 											<div class="icon-selector-warp-item-value">
 												<i :class="v"></i>
@@ -107,31 +108,31 @@ export default {
 			fontIconPrefix: '',
 			fontIconVisible: false,
 			fontIconWidth: 0,
-			fontIconIndex: '',
 			fontIconSearch: '',
 			fontIconTabsIndex: 0,
 			fontIconSheetsList: [],
+			fontIconPlaceholder: '',
 		});
-		// icon input 改变时，实现双向绑定
-		const onIconInput = (icon) => {
-			emit('update:modelValue', icon);
+		// 处理 input 获取焦点时，modelValue 有值时，改变 input 的 placeholder 值
+		const onIconFocus = () => {
+			if (!props.modelValue) return false;
+			state.fontIconSearch = '';
+			state.fontIconPlaceholder = props.modelValue;
+		};
+		// 处理 input 失去焦点时，为空将清空 input 值，为点击选中图标时，将取原先值
+		const onIconBlur = () => {
+			setTimeout(() => {
+				const icon = state.fontIconSheetsList.filter((icon: string) => icon === state.fontIconSearch);
+				if (icon.length <= 0) state.fontIconSearch = '';
+			}, 300);
 		};
 		// 处理 icon 双向绑定数值回显
 		const initModeValueEcho = () => {
-			// 父级 v-model 为空，不执行下一步
 			if (props.modelValue === '') return false;
-			// 双向绑定赋值回显
-			state.fontIconSearch = props.modelValue;
-			// 处理回显
-			let iconData: object = {};
-			for (let i in state.fontIconSheetsList) {
-				if (state.fontIconSheetsList[i].toLowerCase().indexOf(props.modelValue) !== -1) {
-					iconData = { item: state.fontIconSheetsList[i] };
-				}
-			}
-			onColClick(iconData.item, 0);
+			state.fontIconPlaceholder = props.modelValue;
+			state.fontIconPrefix = props.modelValue;
 		};
-		// 设置无数据时的空状态
+		// 图标搜索及图标数据显示
 		const fontIconSheetsFilterList = computed(() => {
 			if (!state.fontIconSearch) return state.fontIconSheetsList;
 			let search = state.fontIconSearch.trim().toLowerCase();
@@ -171,22 +172,27 @@ export default {
 					state.fontIconSheetsList = res.map((i) => `fa ${i}`);
 				});
 			}
+			// 初始化 input 的 placeholder
+			// 参考（单项数据流）：https://cn.vuejs.org/v2/guide/components-props.html?#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81
+			state.fontIconPlaceholder = props.placeholder;
+			// 初始化双向绑定回显
 			initModeValueEcho();
 		};
 		// 获取当前点击的 icon 图标
-		const onColClick = (v: any, k: number) => {
-			state.fontIconIndex = k;
+		const onColClick = (v: any) => {
+			state.fontIconPlaceholder = v;
 			state.fontIconVisible = false;
 			if (state.fontIconTabsIndex === 0) state.fontIconPrefix = `${v}`;
 			else if (state.fontIconTabsIndex === 1) state.fontIconPrefix = `${v}`;
 			else if (state.fontIconTabsIndex === 2) state.fontIconPrefix = `${v}`;
 			emit('get', state.fontIconPrefix);
+			emit('update:modelValue', state.fontIconPrefix);
 		};
 		// 清空当前点击的 icon 图标
 		const onClearFontIcon = () => {
-			state.fontIconIndex = '';
 			state.fontIconPrefix = '';
 			emit('clear', state.fontIconPrefix);
+			emit('update:modelValue', state.fontIconPrefix);
 		};
 		// 页面加载时
 		onMounted(() => {
@@ -206,7 +212,8 @@ export default {
 			fontIconSheetsFilterList,
 			onColClick,
 			onClearFontIcon,
-			onIconInput,
+			onIconFocus,
+			onIconBlur,
 			...toRefs(state),
 		};
 	},
diff --git a/src/theme/element.scss b/src/theme/element.scss
index 749b871..e819194 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -1,5 +1,6 @@
 @import 'mixins/function.scss';
 @import 'mixins/element-mixins.scss';
+@import 'mixins/mixins.scss';
 
 /* Button 按钮
 ------------------------------- */
@@ -833,14 +834,6 @@
 	}
 }
 // 第三方图标字体间距/大小设置
-@mixin generalIcon {
-	font-size: 14px !important;
-	display: inline-block;
-	vertical-align: middle;
-	margin-right: 5px;
-	width: 24px;
-	text-align: center;
-}
 .el-menu-item .iconfont,
 .el-submenu .iconfont {
 	@include generalIcon;
@@ -849,15 +842,6 @@
 .el-submenu .fa {
 	@include generalIcon;
 }
-.el-menu-item .iconfont,
-.el-submenu .iconfont {
-	font-size: 14px !important;
-	display: inline-block;
-	vertical-align: middle;
-	margin-right: 5px;
-	width: 24px;
-	text-align: center;
-}
 // element plus 本身字体图标
 .el-submenu [class^='el-icon-'] {
 	font-size: 14px !important;
diff --git a/src/theme/mixins/mixins.scss b/src/theme/mixins/mixins.scss
index f98f101..31667af 100644
--- a/src/theme/mixins/mixins.scss
+++ b/src/theme/mixins/mixins.scss
@@ -1,3 +1,14 @@
+/* 第三方图标字体间距/大小设置
+------------------------------- */
+@mixin generalIcon {
+	font-size: 14px !important;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: 5px;
+	width: 24px;
+	text-align: center;
+}
+
 /* 文本不换行
 ------------------------------- */
 @mixin text-no-wrap() {
diff --git a/src/utils/getStyleSheets.ts b/src/utils/getStyleSheets.ts
index 6eccb7a..73406a0 100644
--- a/src/utils/getStyleSheets.ts
+++ b/src/utils/getStyleSheets.ts
@@ -36,7 +36,7 @@ const getElementPlusIconfont = () => {
 			for (let i = 0; i < styles.length; i++) {
 				for (let j = 0; j < styles[i].cssRules.length; j++) {
 					if (styles[i].cssRules[j].selectorText && styles[i].cssRules[j].selectorText.indexOf('.el-icon-') === 0) {
-						if (!/--/.test(styles[i].cssRules[j].selectorText)) {
+						if (/::before/.test(styles[i].cssRules[j].selectorText)) {
 							sheetsIconList.push(
 								`${styles[i].cssRules[j].selectorText.substring(1, styles[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
 							);
@@ -44,7 +44,7 @@ const getElementPlusIconfont = () => {
 					}
 				}
 			}
-			if (sheetsIconList.length > 0) resolve(sheetsIconList);
+			if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
 			else reject('未获取到值，请刷新重试');
 		});
 	});
@@ -77,7 +77,7 @@ const getAwesomeIconfont = () => {
 					}
 				}
 			}
-			if (sheetsIconList.length > 0) resolve(sheetsIconList);
+			if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
 			else reject('未获取到值，请刷新重试');
 		});
 	});