给动态生成的id标签添加html,vue动态渲染svg、添加点击事件

欢迎关注[前端小讴的github]，原创技术文章

业务需求(vue项目中)

1.页面展示svg内容

2.监听svg内部的点击事件

3.动态改变svg内部元素的属性和值

html标签

经多次实验，用embed、img等标签改变src属性的方式，均无法实现上述全部功能(尤其是svg内部点击事件)，最终采用Vue.extend()方法完整实现，代码也较为简洁，html结构如下：

直接将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

给动态生成的id标签添加html,vue动态渲染svg、添加点击事件相关推荐

vue动态生成下拉框_解决vue动态下拉菜单有数据未反应的问题
问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料发现 Vue的this理解有误 jsp 下拉菜单 {{item.plantModelName}} JS new Vue({ el ...
给动态生成的id标签添加html,比较好玩的动态添加网页元素
比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格效果如下: 源代码如下: function btnClic ...
python3动态生成变量_【转载】 Python动态生成变量
用Python循环创建多个变量, 如创建 a1= .a2= .a3= .a4= .a5= 或 self.a1= .self.a2= . self.a3= 一. 可以通 ...
org.apache.poi Excel列与行都是动态生成的_网络爬虫：Python动态网页爬虫2种技术方式及示例...
作者:糖甜甜甜 https://mp.weixin.qq.com/s/5Dwh5cbfjpDfm_FRcpw1Ug 这一讲,我将会为大家讲解稍微复杂一点的爬虫,即动态网页的爬虫. 动态网页技术介绍动 ...
JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）...
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效解决方法: 方案一:js动态生成元素后再给 ...
popwindow 加个边框_利用popupwindow生成带有列表的对话框，并设置对话框列表的点击事件...
点击某个View弹出popupwindow列表: 代码:private ArrayAdapter adapter_huoMing; private PopupWindow popupWindow; / ...
c语言动态生成结构体结构,C语言实现动态结构体数组
C语言实现动态结构体数组原因是因为以前使用C++来实现的,主要用VERCTOR C++标准库的失代器而不是纯C:C++是C语言的超集,除了包含C外,还有C++各种新语法,新库! 不过虽然C++用起 ...
js 动态生成html（js根据后台返回数据生成html页面中的table标签）（转义字符）
js 动态生成html table标签中内容js生成 html代码 js代码 js 动态生成html 触发事件传参字符转义 table标签中内容js生成 html代码 <div><t ...
动态生成数据后绑定事件
HTML代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta chars ...

给动态生成的id标签添加html,vue动态渲染svg、添加点击事件

给动态生成的id标签添加html,vue动态渲染svg、添加点击事件相关推荐

最新文章

热门文章