128 lines
3.7 KiB
TypeScript
128 lines
3.7 KiB
TypeScript
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;
|