/* 3. 修改 dom */
this.svgDom.getElementById("...").childNodes[0].nodeValue = ...;
this.svgDom.getElementById("...").setAttribute("style",
`....; fill:${this.photoResult.resultColor}; ...`);
/* 4.将svgDom对象转换成vue的虚拟dom */
var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(this.svgDom);
var Profile = Vue.extend({
template: "<div id='svgTemplate'>" + sXML + "</div>"
});
// 创建实例，并挂载到元素上
new Profile().$mount("#svgTemplate");
});
},
// 事件
takePhoto() { ... },
},
beforeDestroy() {
this.svgDom = null;
},
watch: {
photoResult: {
handler(newVal, oldVal) {
this.getSvg();
},
deep: true
}
}
};
</script>
到此这篇关于vue动态渲染svg、添加点击事件的实现的文章就介绍到这了,更多相关vue动态渲染svg、添加点击事件内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
