zq
3 weeks ago
14 changed files with 793 additions and 123 deletions
@ -0,0 +1 @@ |
|||
{"v":"5.12.2","fr":60,"ip":0,"op":55,"w":88,"h":88,"nm":"Frame 2","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"â½ Group 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[360]},{"t":55,"s":[720]}],"ix":10},"p":{"a":0,"k":[44.5,43.5,0],"ix":2,"l":2},"a":{"a":0,"k":[33.5,33.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":55,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Ellipse 2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50.25,16.75,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,-18.502]],"o":[[18.502,0],[0,0]],"v":[[-16.75,-16.75],[16.75,16.75]],"c":false},"ix":2},"nm":"路徠1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.357,0.435,0.965],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"æÂÂè¾¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂæ¢"}],"nm":"Ellipse 2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":55,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Ellipse 1","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[33.5,33.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[67,67],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"æ¤ÂÃ¥ÂÂ路徠1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.898,0.91,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":7,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"æÂÂè¾¹ 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Ã¥ÂÂæ¢"}],"nm":"Ellipse 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":55,"st":0,"ct":1,"bm":0}],"markers":[],"props":{}} |
|||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<div class="svg-icon-wrapper" :style="wrapperStyle" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"> |
|||
<div class="svg-icon" v-html="svgContent" :style="{ |
|||
'--icon-color': (hoverEffect || isActive) ? activeColor : defaultColor, |
|||
'--icon-hover-color': activeColor |
|||
}"></div> |
|||
<!-- :style="iconStyle" --> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'SvgIcon', |
|||
props: { |
|||
// 图标路径（必须） |
|||
iconPath: { |
|||
type: String, |
|||
required: true |
|||
}, |
|||
// 默认颜色 |
|||
defaultColor: { |
|||
type: String, |
|||
default: '#606266' |
|||
}, |
|||
// 激活颜色（传入后才允许变色） |
|||
activeColor: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 是否开启悬停变色 |
|||
hoverEffect: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
// 图标大小 |
|||
size: { |
|||
type: [String, Number], |
|||
default: '14px' |
|||
}, |
|||
// 是否当前激活状态 |
|||
isActive: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
svgContent: '', |
|||
isHovering: false, |
|||
currentColor: this.defaultColor |
|||
} |
|||
}, |
|||
computed: { |
|||
wrapperStyle() { |
|||
return { |
|||
width: typeof this.size === 'number' ? `${this.size}px` : this.size, |
|||
height: typeof this.size === 'number' ? `${this.size}px` : this.size, |
|||
display: 'inline-flex', |
|||
alignItems: 'center', |
|||
justifyContent: 'center' |
|||
} |
|||
}, |
|||
iconStyle() { |
|||
return { |
|||
width: '100%', |
|||
height: '100%', |
|||
color: this.currentColor, |
|||
transition: 'color 0.3s ease' |
|||
} |
|||
}, |
|||
shouldChangeColor() { |
|||
return this.activeColor && (this.hoverEffect || this.isActive) |
|||
} |
|||
}, |
|||
watch: { |
|||
isActive(newVal) { |
|||
console.log(newVal, 'newVal---'); |
|||
if (this.shouldChangeColor) { |
|||
this.currentColor = newVal ? this.activeColor : this.defaultColor |
|||
console.log(this.currentColor, 'this.currentColor--'); |
|||
} |
|||
}, |
|||
defaultColor(newVal) { |
|||
if (!this.isHovering && !this.isActive) { |
|||
this.currentColor = newVal |
|||
} |
|||
}, |
|||
activeColor() { |
|||
this.updateColorState() |
|||
} |
|||
}, |
|||
methods: { |
|||
async loadSvg() { |
|||
try { |
|||
const response = await fetch(this.iconPath) |
|||
this.svgContent = await response.text() |
|||
this.processSvg() |
|||
} catch (error) { |
|||
console.error('Failed to load SVG:', error) |
|||
} |
|||
}, |
|||
processSvg() { |
|||
// 确保SVG没有自带颜色，以便用CSS控制 |
|||
this.$nextTick(() => { |
|||
const svgElement = this.$el.querySelector('svg') |
|||
if (svgElement) { |
|||
// 更彻底地移除颜色属性 |
|||
svgElement.removeAttribute('fill') |
|||
svgElement.removeAttribute('style') |
|||
const paths = svgElement.querySelectorAll('path, circle, rect, polygon') |
|||
paths.forEach(el => { |
|||
el.removeAttribute('fill') |
|||
}) |
|||
svgElement.style.fill = 'currentColor' |
|||
svgElement.style.width = '100%' |
|||
svgElement.style.height = '100%' |
|||
} |
|||
}) |
|||
}, |
|||
handleMouseEnter() { |
|||
this.isHovering = true |
|||
this.updateColorState() |
|||
}, |
|||
handleMouseLeave() { |
|||
this.isHovering = false |
|||
this.updateColorState() |
|||
}, |
|||
updateColorState() { |
|||
if (this.activeColor) { |
|||
if (this.isActive) { |
|||
this.currentColor = this.activeColor |
|||
} else { |
|||
this.currentColor = this.isHovering && this.hoverEffect ? |
|||
this.activeColor : |
|||
this.defaultColor |
|||
} |
|||
} else { |
|||
this.currentColor = this.defaultColor |
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
this.loadSvg() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.svg-icon-wrapper { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
|
|||
.svg-icon { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: var(--icon-color); |
|||
transition: color 0.3s; |
|||
} |
|||
|
|||
.svg-icon:hover { |
|||
color: var(--icon-hover-color); |
|||
} |
|||
|
|||
.svg-icon { |
|||
display: inline-flex; |
|||
} |
|||
|
|||
.svg-icon>>>svg { |
|||
fill: currentColor; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue