添加国旗图标

src/components/iconSelector/index.vue

@@ -42,6 +42,9 @@
 						<el-tab-pane lazy label="awe" name="awe">
 							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
 						</el-tab-pane>
+						<el-tab-pane lazy label="flag" name="flag">
+							<IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
+						</el-tab-pane>
 					</el-tabs>
 				</div>
 			</template>
@@ -116,6 +119,7 @@ const state = reactive({
 		ali: [],
 		ele: [],
 		awe: [],
+		flag: []
 	},
 });
 
@@ -148,6 +152,7 @@ const fontIconTabNameList = () => {
 	if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
 	else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
 	else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
+	else if (state.fontIconTabActive === 'flag') iconList = state.fontIconList.flag;
 	return iconList;
 };
 // 处理 icon 双向绑定数值回显
@@ -162,6 +167,7 @@ const initFontIconName = () => {
 	if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
 	else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
 	else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
+	else if (props.modelValue!.indexOf('fi') > -1) name = 'flag';
 	// 初始化 tab 高亮回显
 	state.fontIconTabActive = name;
 	return name;
@@ -186,6 +192,12 @@ const initFontIconData = async (name: string) => {
 		await initIconfont.awe().then((res: any) => {
 			state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
 		});
+	} else if (name === 'flag') {
+		// flag字体图标使用 `fi fi-xx`
+		if (state.fontIconList.awe.length > 0) return;
+		await initIconfont.flag().then((res: any) => {
+			state.fontIconList.flag = res.map((i: string) => `fi ${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

src/utils/getStyleSheets.ts

@@ -76,6 +76,37 @@ const getAwesomeIconfont = () => {
 	});
 };
 
+const getFlagIconfont = () => {
+	return new Promise((resolve, reject) => {
+		nextTick(() => {
+			const styles: any = document.styleSheets;
+			let sheetsList = [];
+			let sheetsIconList = [];
+			for (let i = 0; i < styles.length; i++) {
+				if (styles[i].href && styles[i].href.indexOf('cdn.jsdelivr.net') > -1) {
+					sheetsList.push(styles[i]);
+				}
+			}
+			for (let i = 0; i < sheetsList.length; i++) {
+				for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
+					console.log(sheetsList[i].cssRules[j].selectorText)
+					if (
+						sheetsList[i].cssRules[j].selectorText &&
+						sheetsList[i].cssRules[j].selectorText.indexOf('.fi-') === 0 &&
+						!sheetsList[i].cssRules[j].selectorText.endsWith('.fis')
+					) {
+						sheetsIconList.push(
+							`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length)}`
+						);
+					}
+				}
+			}
+			if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
+			else reject('未获取到值，请刷新重试');
+		})
+	})
+}
+
 /**
  * 获取字体图标 `document.styleSheets`
  * @method ali 获取阿里字体图标 `<i class="iconfont 图标类名"></i>`
@@ -95,6 +126,9 @@ const initIconfont = {
 	awe: () => {
 		return getAwesomeIconfont();
 	},
+	flag: () => {
+		return getFlagIconfont();
+	}
 };
 
 // 导出方法

src/utils/setIconfont.ts

@@ -3,6 +3,7 @@ const cssCdnUrlList: Array<string> = [
 	'//at.alicdn.com/t/font_2298093_y6u00apwst.css',
 	'//at.alicdn.com/t/c/font_3882322_9ah7y8m9175.css', //dvadmin3项目用icon
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+	'//cdn.jsdelivr.net/gh/lipis/flag-icons@6.11.0/css/flag-icons.min.css',  // 国旗图标
 ];
 // 第三方 js url
 const jsCdnUrlList: Array<string> = [];