84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
// components/icon/icon.js
|
||
Component({
|
||
properties: {
|
||
// 图标名称
|
||
name: {
|
||
type: String,
|
||
value: 'share',
|
||
observer: 'updateIcon'
|
||
},
|
||
// 图标大小（rpx）
|
||
size: {
|
||
type: Number,
|
||
value: 48
|
||
},
|
||
// 图标颜色
|
||
color: {
|
||
type: String,
|
||
value: '#ffffff',
|
||
observer: 'updateIcon'
|
||
},
|
||
// 自定义类名
|
||
customClass: {
|
||
type: String,
|
||
value: ''
|
||
},
|
||
// 自定义样式
|
||
customStyle: {
|
||
type: String,
|
||
value: ''
|
||
}
|
||
},
|
||
|
||
data: {
|
||
svgData: ''
|
||
},
|
||
|
||
lifetimes: {
|
||
attached() {
|
||
this.updateIcon()
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// SVG 图标数据映射
|
||
getSvgPath(name) {
|
||
const svgMap = {
|
||
'share': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>',
|
||
|
||
'arrow-up-right': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>',
|
||
|
||
'chevron-left': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>',
|
||
|
||
'search': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
|
||
|
||
'heart': '<svg viewBox="0 0 24 24" fill="none" stroke="COLOR" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>'
|
||
}
|
||
|
||
return svgMap[name] || ''
|
||
},
|
||
|
||
// 更新图标
|
||
updateIcon() {
|
||
const { name, color } = this.data
|
||
let svgString = this.getSvgPath(name)
|
||
|
||
if (svgString) {
|
||
// 替换颜色占位符
|
||
svgString = svgString.replace(/COLOR/g, color)
|
||
|
||
// 转换为 Base64 Data URL
|
||
const svgData = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`
|
||
|
||
this.setData({
|
||
svgData: svgData
|
||
})
|
||
} else {
|
||
this.setData({
|
||
svgData: ''
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|