没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签 经多次实验,用embed、img等标签改变src属性的方式,均无法实现上述全部功能(尤其是svg内部点击事件),最终采用Vue.extend()方法完整实现,代码也较为简洁,html结构如下: <template> <div> <div id=svgTemplate></div> </div> </template> 直接将svg文件的内容复制粘贴到.vue文件里,是可以在标签内直接添加@click事件完成需求的,方式简单但会造成文件过长,本文
资源推荐
资源详情
资源评论
vue动态渲染动态渲染svg、添加点击事件的实现、添加点击事件的实现
业务需求业务需求(vue项目中项目中)
1.页面展示svg内容
2.监听svg内部的点击事件
3.动态改变svg内部元素的属性和值
html标签标签
经多次实验,用embed、img等标签改变src属性的方式,均无法实现上述全部功能(尤其是svg内部点击事件),最终采用
Vue.extend()方法完整实现,代码也较为简洁,html结构如下:
<template>
<div>
<div id="svgTemplate"></div>
</div>
</template>
直接将svg文件的内容复制粘贴到.vue文件里,是可以在标签内直接添加@click事件完成需求的,方式简单但会造成文件过
长,本文不多陈述
实现思路实现思路
1.创建xhr对象
const xhr = new XMLHttpRequest();
this.svgUrl = ...; // svg的绝对地址,在浏览器中打开能看到的那个
xhr.open("GET", this.svgUrl, true);
xhr.send();
2.监听xhr对象(获取svg的dom -> 添加事件 -> 修改dom -> 转成虚拟dom并挂载)
xhr.addEventListener("load", () => {
// ① 获取svg的dom
const resXML = xhr.responseXML;
this.svgDom = resXML.documentElement.cloneNode(true); // console.log(this.svgDom);
// ② 添加click事件
let btn = this.svgDom.getElementById("...");
btn.setAttribute("v-on:click", "this.handleClick()");
// ↑↑↑ 此处注意:原生事件handleClick此时在window层,解决办法见后文
// ③ 修改 dom
this.svgDom.getElementById("...").childNodes[0].nodeValue = ...
this.svgDom.getElementById("...").setAttribute("style",
`....; fill:${this.photoResult.resultColor}; ...`);
// ↑↑↑ 用js操作dom的语法,动态设置svg部件的属性和值
// ④ 将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");
});
3.将methods里要执行的事件绑定到window下面,供外部(刚添加的 handleClick 事件)调用
async mounted() {
window["handleClick"] = () => {
this.takePhoto();
};
},
methods:{
takePhoto(){ ... }
}
到这里就基本完成需求:动态渲染了svg、用js操作dom的语法修改svg部件的属性和值、给svg部件动态添加了事件
资源评论
- asasaaaas2023-11-02资源值得借鉴的内容很多,那就浅学一下吧,值得下载!
weixin_38590775
- 粉丝: 2
- 资源: 915
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- minio20240920.tar
- 集成供应链(Integrated Supply Chain,ISC)核心业务流程再造,华为的最佳实践
- zabbix-server-pgsql-7.0-centos-latest.tar
- zabbix-web-apache-pgsql-7.0-centos-latest.tar
- Altium Designer 24.9.1 Build 31 (x64)
- 基于JAVA的人机对弈的一字棋系统设计与实现课程设计源代码,极大极小搜索和α-β搜索算法
- 电子回单_2024092100085000842531409053050071685353.pdf
- 背景:js多边形渐变网格背景插件效果演示
- Image_1726852355245.jpg
- TaskMsgBus-void
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功