init

src/utils/getStyleSheets.ts

@@ -0,0 +1,127 @@
+import { nextTick } from 'vue';
+import * as svg from '@element-plus/icons-vue';
+
+// 获取阿里字体图标
+const getAlicdnIconfont = () => {
+	return new Promise((resolve, reject) => {
+		nextTick(() => {
+			const styles: any = document.styleSheets;
+			let sheetsList = [] as any[];
+			let sheetsIconList = [] as any[];
+			for (let i = 0; i < styles.length; i++) {
+				if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) {
+					sheetsList.push(styles[i]);
+				}
+			}
+			for (let i = 0; i < sheetsList.length; i++) {
+				for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
+					if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) {
+						sheetsIconList.push(
+							`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
+						);
+					}
+				}
+			}
+			if (sheetsIconList.length > 0) resolve(sheetsIconList);
+			else reject('未获取到值，请刷新重试');
+		});
+	});
+};
+
+// 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
+const getElementPlusIconfont = () => {
+	return new Promise((resolve, reject) => {
+		nextTick(() => {
+			const icons = svg as any;
+			const sheetsIconList = [] as any[];
+			for (const i in icons) {
+				sheetsIconList.push(`ele-${icons[i].name}`);
+			}
+			if (sheetsIconList.length > 0) resolve(sheetsIconList);
+			else reject('未获取到值，请刷新重试');
+		});
+	});
+};
+
+// 初始化获取 css 样式，这里使用 fontawesome 的图标
+const getAwesomeIconfont = () => {
+	return new Promise((resolve, reject) => {
+		nextTick(() => {
+			const styles: any = document.styleSheets;
+			let sheetsList = [] as any[];
+			let sheetsIconList = [] as any[];
+			for (let i = 0; i < styles.length; i++) {
+				if (styles[i].href && styles[i].href.indexOf('font-awesome') > -1) {
+					sheetsList.push(styles[i]);
+				}
+			}
+			for (let i = 0; i < sheetsList.length; i++) {
+				for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
+					if (
+						sheetsList[i].cssRules[j].selectorText &&
+						sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
+						sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
+					) {
+						if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) {
+							sheetsIconList.push(
+								`${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
+							);
+						}
+					}
+				}
+			}
+			if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
+			else reject('未获取到值，请刷新重试');
+		});
+	});
+};
+
+/*
+ * 获取本地自带的图标
+ * /src/assets/icons文件夹内的svg文件
+ */
+const getLocalIconfontNames = () => {
+	return new Promise<string[]>((resolve, reject) => {
+		nextTick(() => {
+			let iconfonts: string[] = [];
+
+			const svgEl = document.getElementById('local-icon');
+			if (svgEl?.dataset.iconName) {
+				iconfonts = (svgEl?.dataset.iconName as string).split(',');
+			}
+
+			if (iconfonts.length > 0) {
+				resolve(iconfonts);
+			} else {
+				reject('No Local Icons');
+			}
+		});
+	});
+};
+
+/**
+ * 获取字体图标 `document.styleSheets`
+ * @method ali 获取阿里字体图标 `<i class="iconfont 图标类名"></i>`
+ * @method ele 获取 element plus 自带图标 `<i class="图标类名"></i>`
+ * @method ali 获取 fontawesome 的图标 `<i class="fa 图标类名"></i>`
+ */
+const initIconfont = {
+	// iconfont
+	ali: () => {
+		return getAlicdnIconfont();
+	},
+	// element plus
+	ele: () => {
+		return getElementPlusIconfont();
+	},
+	// fontawesome
+	awe: () => {
+		return getAwesomeIconfont();
+	},
+	local: () => {
+		return getLocalIconfontNames();
+	},
+};
+
+// 导出方法
+export default initIconfont;