From add68a0d028ec0e6626402aca724cc8c134c81ff Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期二, 09 八月 2022 10:31:21 +0800
Subject: [PATCH] 图标
---
src/utils/getStyleSheets.ts | 194 +++++++++++++++++++++++-------------------------
1 files changed, 93 insertions(+), 101 deletions(-)
diff --git a/src/utils/getStyleSheets.ts b/src/utils/getStyleSheets.ts
index 79144d7..81c80e0 100644
--- a/src/utils/getStyleSheets.ts
+++ b/src/utils/getStyleSheets.ts
@@ -1,101 +1,93 @@
-// 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 = [];
-// let sheetsIconList = [];
-// 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 = [];
-// 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 = [];
-// let sheetsIconList = [];
-// for (let i = 0; i < styles.length; i++) {
-// if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.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('.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('未获取到值，请刷新重试');
-// });
-// });
-// };
-//
-// /**
-// * 获取字体图标 `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();
-// },
-// };
-//
-// // 导出方法
-// export default initIconfont;
+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 = [];
+ let sheetsIconList = [];
+ 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 = [];
+ 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 = [];
+ let sheetsIconList = [];
+ for (let i = 0; i < styles.length; i++) {
+ if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.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('.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('未获取到值，请刷新重试');
+ });
+ });
+};
+
+/**
+ * 获取字体图标 `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();
+ }
+};
+
+// 导出方法
+export default initIconfont;
--
Gitblit v1.9.2