getStyleSheets.ts 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. import { nextTick } from 'vue';
  2. import * as svg from '@element-plus/icons-vue';
  3. // 获取阿里字体图标
  4. const getAlicdnIconfont = () => {
  5. return new Promise((resolve, reject) => {
  6. nextTick(() => {
  7. const styles: any = document.styleSheets;
  8. let sheetsList = [];
  9. let sheetsIconList = [];
  10. for (let i = 0; i < styles.length; i++) {
  11. if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) {
  12. sheetsList.push(styles[i]);
  13. }
  14. }
  15. for (let i = 0; i < sheetsList.length; i++) {
  16. for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
  17. if (sheetsList[i].cssRules[j].selectorText && sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1) {
  18. sheetsIconList.push(
  19. `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
  20. );
  21. }
  22. }
  23. }
  24. if (sheetsIconList.length > 0) resolve(sheetsIconList);
  25. else reject('未获取到值,请刷新重试');
  26. });
  27. });
  28. };
  29. // 初始化获取 css 样式,获取 element plus 自带 svg 图标,增加了 ele- 前缀,使用时:ele-Aim
  30. const getElementPlusIconfont = () => {
  31. return new Promise((resolve, reject) => {
  32. nextTick(() => {
  33. const icons = svg as any;
  34. const sheetsIconList = [];
  35. for (const i in icons) {
  36. sheetsIconList.push(`ele-${icons[i].name}`);
  37. }
  38. if (sheetsIconList.length > 0) resolve(sheetsIconList);
  39. else reject('未获取到值,请刷新重试');
  40. });
  41. });
  42. };
  43. // 初始化获取 css 样式,这里使用 fontawesome 的图标
  44. const getAwesomeIconfont = () => {
  45. return new Promise((resolve, reject) => {
  46. nextTick(() => {
  47. const styles: any = document.styleSheets;
  48. let sheetsList = [];
  49. let sheetsIconList = [];
  50. // 判断fontFamily是否是本地加载
  51. for (let i = 0; i < styles.length; i++) {
  52. const rules = styles[i].cssRules || styles[i].rules;
  53. if (rules) {
  54. for (let j = 0; j < rules.length; j++) {
  55. if (rules[j].style && rules[j].style.fontFamily === 'FontAwesome') {
  56. sheetsList.push(styles[i])
  57. }
  58. }
  59. }
  60. }
  61. for (let i = 0; i < styles.length; i++) {
  62. if (styles[i].href && styles[i].href.indexOf('netdna.bootstrapcdn.com') > -1) {
  63. sheetsList.push(styles[i]);
  64. }
  65. }
  66. for (let i = 0; i < sheetsList.length; i++) {
  67. for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
  68. if (
  69. sheetsList[i].cssRules[j].selectorText &&
  70. sheetsList[i].cssRules[j].selectorText.indexOf('.fa-') === 0 &&
  71. sheetsList[i].cssRules[j].selectorText.indexOf(',') === -1
  72. ) {
  73. if (/::before/.test(sheetsList[i].cssRules[j].selectorText)) {
  74. sheetsIconList.push(
  75. `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
  76. );
  77. }
  78. }
  79. }
  80. }
  81. if (sheetsIconList.length > 0) resolve(sheetsIconList.reverse());
  82. else reject('未获取到值,请刷新重试');
  83. });
  84. });
  85. };
  86. /**
  87. * 获取字体图标 `document.styleSheets`
  88. * @method ali 获取阿里字体图标 `<i class="iconfont 图标类名"></i>`
  89. * @method ele 获取 element plus 自带图标 `<i class="图标类名"></i>`
  90. * @method ali 获取 fontawesome 的图标 `<i class="fa 图标类名"></i>`
  91. */
  92. const initIconfont = {
  93. // iconfont
  94. ali: () => {
  95. return getAlicdnIconfont();
  96. },
  97. // element plus
  98. ele: () => {
  99. return getElementPlusIconfont();
  100. },
  101. // fontawesome
  102. awe: () => {
  103. return getAwesomeIconfont();
  104. },
  105. };
  106. // 导出方法
  107. export default initIconfont;