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: ''
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|