90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
Component({
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
key: {
|
|
type: Number,
|
|
value: 0,
|
|
},
|
|
svg: {
|
|
type: String,
|
|
value: '',
|
|
},
|
|
fillColor: {
|
|
type: String,
|
|
value: '',
|
|
},
|
|
},
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
svgDataUri: '',
|
|
},
|
|
/**
|
|
* 组件生命周期
|
|
*/
|
|
lifetimes: {
|
|
attached() {
|
|
this.generateSvgDataUri();
|
|
},
|
|
},
|
|
/**
|
|
* 监听属性变化
|
|
*/
|
|
observers: {
|
|
'svg, fillColor': function () {
|
|
this.generateSvgDataUri();
|
|
}
|
|
},
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
/**
|
|
* 生成完整的 SVG Data URI
|
|
*/
|
|
generateSvgDataUri() {
|
|
const { svg, fillColor } = this.data;
|
|
if (fillColor === 'transparent') return;
|
|
if (!svg) return;
|
|
|
|
// 处理 fill 属性：无论原来有没有 fill，都要赋值为 fillColor
|
|
let processedSvg = svg;
|
|
|
|
// 1. 如果有 fill 属性，全部替换为 fillColor
|
|
if (/fill="[^"]*"/.test(processedSvg)) {
|
|
processedSvg = processedSvg.replace(/fill="[^"]*"/g, `fill="${fillColor || '#ff0000'}"`);
|
|
} else {
|
|
// 2. 没有 fill 属性，则在第一个标签内加上 fill
|
|
processedSvg = processedSvg.replace(
|
|
/(<(?:circle|rect|polygon|ellipse|path|line)[^>]*?)(\/?>)/,
|
|
`$1 fill="${fillColor || '#ff0000'}"$2`
|
|
);
|
|
}
|
|
const completeSvg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">${processedSvg}</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, fillColor } = this.data;
|
|
this.triggerEvent('onColorTap', { key, fillColor });
|
|
},
|
|
|
|
onShapeTap() {
|
|
const { key } = this.data;
|
|
this.triggerEvent('onShapeTap', { key });
|
|
},
|
|
},
|
|
});
|