From 543a31b6d1794d4dbc7dbf8f26a8158412c5a192 Mon Sep 17 00:00:00 2001
From: lyt-Top <1105290566@qq.com>
Date: Sat, 3 Jul 2021 20:29:26 +0800
Subject: [PATCH] =?UTF-8?q?'admin-07.03:=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=E9=97=AE=E9=A2=98=EF=BC=8C=E6=84=9F?=
 =?UTF-8?q?=E8=B0=A2=E7=BE=A4=E5=8F=8B@=E4=BC=AF=E7=89=99=E5=B7=B2?=
 =?UTF-8?q?=E9=81=87=E9=92=9F=E5=AD=90=E6=9C=9F'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/iconSelector/index.vue | 33 ++++++++++++---------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/components/iconSelector/index.vue b/src/components/iconSelector/index.vue
index e5e5075..27fce86 100644
--- a/src/components/iconSelector/index.vue
+++ b/src/components/iconSelector/index.vue
@@ -31,21 +31,11 @@
 					<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"
-									:class="`${fontIconTabsIcon}-col`"
-									@click="onColClick(v, k)"
-									v-for="(v, k) in fontIconSheetsFilterList"
-									:key="k"
-								>
+								<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 }">
 										<div class="flex-margin">
 											<div class="icon-selector-warp-item-value">
-												<i :class="[fontIconTabsIcon, v]"></i>
+												<i :class="v"></i>
 											</div>
 										</div>
 									</div>
@@ -61,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { ref, toRefs, reactive, onMounted, nextTick, computed } from 'vue';
+import { ref, toRefs, reactive, onMounted, nextTick, computed, watch } from 'vue';
 import initIconfont from '/@/utils/getStyleSheets';
 export default {
 	name: 'iconSelector',
@@ -120,7 +110,6 @@ export default {
 			fontIconIndex: '',
 			fontIconSearch: '',
 			fontIconTabsIndex: 0,
-			fontIconTabsIcon: 'iconfont ali',
 			fontIconSheetsList: [],
 		});
 		// icon input 改变时，实现双向绑定
@@ -166,21 +155,20 @@ export default {
 		const initFontIconData = async () => {
 			if (props.type === 'ali') {
 				await initIconfont.ali().then((res: any) => {
-					state.fontIconTabsIcon = 'iconfont';
 					state.fontIconTabsIndex = 0;
-					state.fontIconSheetsList = res;
+					// 阿里字体图标使用 `iconfont xxx`
+					state.fontIconSheetsList = res.map((i) => `iconfont ${i}`);
 				});
 			} else if (props.type === 'ele') {
 				await initIconfont.ele().then((res: any) => {
-					state.fontIconTabsIcon = 'ele';
 					state.fontIconTabsIndex = 1;
 					state.fontIconSheetsList = res;
 				});
 			} else if (props.type === 'awe') {
 				await initIconfont.awe().then((res: any) => {
-					state.fontIconTabsIcon = 'fa';
 					state.fontIconTabsIndex = 2;
-					state.fontIconSheetsList = res;
+					// fontawesome字体图标使用 `fa xxx`
+					state.fontIconSheetsList = res.map((i) => `fa ${i}`);
 				});
 			}
 			initModeValueEcho();
@@ -206,6 +194,13 @@ export default {
 			initResize();
 			getInputWidth();
 		});
+		// 监听双向绑定 modelValue 的变化
+		watch(
+			() => props.modelValue,
+			() => {
+				initModeValueEcho();
+			}
+		);
 		return {
 			inputWidthRef,
 			fontIconSheetsFilterList,