init

wujingjing

2024-08-29 19b778d2d04bed31ce2e1f167c6ff2fda9906421

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import * as svg from '@element-plus/icons-vue';
import { nextTick } from 'vue';
 
// 获取阿里字体图标
const getAlicdnIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const styles: any = document.styleSheets;
            const sheetsList = [];
            const sheetsIconList = [];
            for (let i = 0; i < styles.length; i++) {
                if (styles[i].href && styles[i].href.indexOf('iconfont') > -1 && styles[i].href.indexOf('ywiconfont') === -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('未获取到值，请刷新重试');
        });
    });
};
 
// 获取义维字体图标
const getYwCdnIconfont = () => {
    return new Promise((resolve, reject) => {
        nextTick(() => {
            const styles: any = document.styleSheets;
            const sheetsList = [];
            const sheetsIconList = [];
            for (let i = 0; i < styles.length; i++) {
                if (styles[i].href && styles[i].href.indexOf('ywiconfont') > -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('.ywicon-') > -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;
            const sheetsList = [];
            const sheetsIconList = [];
            for (let i = 0; i < styles.length; i++) {
                if (styles[i].href && styles[i].href.indexOf('fontawesome') > -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();
    },
    yw: () => {
        return getYwCdnIconfont();
    },
};
 
// 导出方法
export default initIconfont;