修改动态 svg
This commit is contained in:
@@ -1,85 +1,112 @@
|
||||
import { nextTick } from 'vue'
|
||||
import * as elIcons from '@element-plus/icons-vue'
|
||||
import { getUrl } from '@/utils/request'
|
||||
|
||||
/*
|
||||
* 获取element plus 自带的图标
|
||||
*/
|
||||
export function getElementPlusIconfontNames() {
|
||||
return new Promise<string[]>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
const iconfonts = []
|
||||
const icons = elIcons as any
|
||||
for (const i in icons) {
|
||||
iconfonts.push(`el-icon-${icons[i].name}`)
|
||||
}
|
||||
if (iconfonts.length > 0) {
|
||||
resolve(iconfonts)
|
||||
} else {
|
||||
reject('No ElementPlus Icons')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取Vite开发服务/编译后的样式表内容
|
||||
* @param devID style 标签的 viteDevId,只开发服务有
|
||||
*/
|
||||
function getStylesFromVite(devId: string) {
|
||||
const sheets = []
|
||||
const styles: StyleSheetList = document.styleSheets
|
||||
if (import.meta.env.MODE == 'production') {
|
||||
const url = getUrl()
|
||||
for (const key in styles) {
|
||||
if (styles[key].href && styles[key].href?.indexOf(url) === 0) {
|
||||
sheets.push(styles[key])
|
||||
}
|
||||
}
|
||||
return sheets
|
||||
}
|
||||
for (const key in styles) {
|
||||
const ownerNode = styles[key].ownerNode as HTMLMapElement
|
||||
if (ownerNode && ownerNode.dataset?.viteDevId && ownerNode.dataset.viteDevId!.indexOf(devId) > -1) {
|
||||
sheets.push(styles[key])
|
||||
}
|
||||
}
|
||||
return sheets
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* 获取 Awesome-Iconfont 的 name 列表
|
||||
*/
|
||||
export function getAwesomeIconfontNames() {
|
||||
return new Promise<string[]>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
const iconfonts = []
|
||||
const sheets = getStylesFromVite('all.css')
|
||||
// console.log(sheets)
|
||||
for (const key in sheets) {
|
||||
const rules: any = sheets[key].cssRules
|
||||
for (const k in rules) {
|
||||
if (!rules[k].selectorText || rules[k].selectorText.indexOf('.fa-') !== 0) {
|
||||
continue
|
||||
}
|
||||
if (/^\.fa-(.*)::before$/g.test(rules[k].selectorText)) {
|
||||
if (rules[k].selectorText.indexOf(', ') > -1) {
|
||||
const iconNames = rules[k].selectorText.split(', ')
|
||||
iconfonts.push(`${iconNames[0].substring(1, iconNames[0].length).replace(/\:\:before/gi, '')}`)
|
||||
} else {
|
||||
iconfonts.push(`${rules[k].selectorText.substring(1, rules[k].selectorText.length).replace(/\:\:before/gi, '')}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (iconfonts.length > 0) {
|
||||
resolve(iconfonts)
|
||||
} else {
|
||||
reject('没有样式表')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
import { nextTick } from 'vue'
|
||||
import * as elIcons from '@element-plus/icons-vue'
|
||||
import { getUrl } from '@/utils/request'
|
||||
|
||||
/*
|
||||
* 获取element plus 自带的图标
|
||||
*/
|
||||
export function getElementPlusIconfontNames() {
|
||||
return new Promise<string[]>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
const iconfonts = []
|
||||
const icons = elIcons as any
|
||||
for (const i in icons) {
|
||||
iconfonts.push(`el-icon-${icons[i].name}`)
|
||||
}
|
||||
if (iconfonts.length > 0) {
|
||||
resolve(iconfonts)
|
||||
} else {
|
||||
reject('No ElementPlus Icons')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取Vite开发服务/编译后的样式表内容
|
||||
* @param devID style 标签的 viteDevId,只开发服务有
|
||||
*/
|
||||
function getStylesFromVite(devId: string) {
|
||||
const sheets = []
|
||||
const styles: StyleSheetList = document.styleSheets
|
||||
if (import.meta.env.MODE == 'production') {
|
||||
const url = getUrl()
|
||||
for (const key in styles) {
|
||||
if (styles[key].href && styles[key].href?.indexOf(url) === 0) {
|
||||
sheets.push(styles[key])
|
||||
}
|
||||
}
|
||||
return sheets
|
||||
}
|
||||
for (const key in styles) {
|
||||
const ownerNode = styles[key].ownerNode as HTMLMapElement
|
||||
if (ownerNode && ownerNode.dataset?.viteDevId && ownerNode.dataset.viteDevId!.indexOf(devId) > -1) {
|
||||
sheets.push(styles[key])
|
||||
}
|
||||
}
|
||||
return sheets
|
||||
}
|
||||
|
||||
/*
|
||||
* 获取 Awesome-Iconfont 的 name 列表
|
||||
*/
|
||||
export function getAwesomeIconfontNames() {
|
||||
return new Promise<string[]>((resolve, reject) => {
|
||||
nextTick(() => {
|
||||
const iconfonts = []
|
||||
const sheets = getStylesFromVite('all.css')
|
||||
console.log(sheets)
|
||||
for (const key in sheets) {
|
||||
const rules: any = sheets[key].cssRules
|
||||
for (const k in rules) {
|
||||
if (!rules[k].selectorText || rules[k].selectorText.indexOf('.fa-') !== 0) {
|
||||
continue
|
||||
}
|
||||
if (/^\.fa-(.*)::before$/g.test(rules[k].selectorText)) {
|
||||
if (rules[k].selectorText.indexOf(', ') > -1) {
|
||||
const iconNames = rules[k].selectorText.split(', ')
|
||||
iconfonts.push(
|
||||
`${iconNames[0].substring(1, iconNames[0].length).replace(/\:\:before/gi, '')}`
|
||||
)
|
||||
} else {
|
||||
iconfonts.push(
|
||||
`${rules[k].selectorText
|
||||
.substring(1, rules[k].selectorText.length)
|
||||
.replace(/\:\:before/gi, '')}`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (iconfonts.length > 0) {
|
||||
resolve(iconfonts)
|
||||
} else {
|
||||
reject('没有样式表')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/*
|
||||
* 获取本地自带的图标
|
||||
* /src/assets/icons文件夹内的svg文件
|
||||
*/
|
||||
export function 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 Icons')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
24
src/utils/propTypes.ts
Normal file
24
src/utils/propTypes.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { VueTypeValidableDef, VueTypesInterface, createTypes, toValidableType } from 'vue-types'
|
||||
import { CSSProperties } from 'vue'
|
||||
|
||||
type PropTypes = VueTypesInterface & {
|
||||
readonly style: VueTypeValidableDef<CSSProperties>
|
||||
}
|
||||
const newPropTypes = createTypes({
|
||||
func: undefined,
|
||||
bool: undefined,
|
||||
string: undefined,
|
||||
number: undefined,
|
||||
object: undefined,
|
||||
integer: undefined
|
||||
}) as PropTypes
|
||||
|
||||
class propTypes extends newPropTypes {
|
||||
static get style() {
|
||||
return toValidableType('style', {
|
||||
type: [String, Object]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export { propTypes }
|
||||
Reference in New Issue
Block a user