73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
key: {
|
|
type: Number,
|
|
value: 0,
|
|
},
|
|
svg: {
|
|
type: String,
|
|
value: '',
|
|
},
|
|
color: {
|
|
type: String,
|
|
value: '',
|
|
},
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
svgDataUri: '',
|
|
},
|
|
/**
|
|
* 组件生命周期
|
|
*/
|
|
lifetimes: {
|
|
attached() {
|
|
this.generateSvgDataUri();
|
|
},
|
|
},
|
|
/**
|
|
* 监听属性变化
|
|
*/
|
|
observers: {
|
|
'svg, color': function () {
|
|
this.generateSvgDataUri();
|
|
}
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
/**
|
|
* 生成完整的 SVG Data URI
|
|
*/
|
|
generateSvgDataUri() {
|
|
const { svg, color } = this.data;
|
|
if (!svg) return;
|
|
|
|
// 创建完整的 SVG 字符串，替换填充颜色
|
|
const coloredSvg = svg.replace(/fill="#ff0000"/g, `fill="${color || '#ff0000'}"`);
|
|
const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${coloredSvg}</svg>`;
|
|
|
|
// 转换为 Data URI
|
|
const svgDataUri = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(completeSvg)}`;
|
|
|
|
this.setData({
|
|
svgDataUri: svgDataUri
|
|
});
|
|
},
|
|
onDelete() {
|
|
const { key } = this.data;
|
|
this.triggerEvent('onDelete', { key });
|
|
},
|
|
onColorTap() {
|
|
const { key, color } = this.data;
|
|
this.triggerEvent('onColorTap', { key, color });
|
|
},
|
|
},
|
|
});
|