vue操作dom并为dom增加点击事件
本文实现的效果是利用js 在element图片放大后新增加一个下载的按钮 效果如下实现效果环境项目中采用 vue + element 的方式图片放大预览主要借助 element里面内部的一个未公开组件有兴趣的小伙伴可以自行查看源码分析过程打开控制台后 发现这里实际 是在一个名字为el-image-viewer__actions__inner 的 class 下追加一个 i元素的标签 ,icon 使
·
本文实现的效果是利用js 在element图片放大后新增加一个下载的按钮 效果如下
实现效果
环境
项目中采用 vue
+ element
的方式
图片放大预览主要借助 element里面内部的一个未公开组件
有兴趣的小伙伴可以自行查看源码
分析过程
打开控制台后 发现这里实际 是在一个名字为el-image-viewer__actions__inner
的 class
下追加一个 i
元素的标签 ,icon 使用element自带的图标即可
分析可以得知,我们只需要在 class el-image-viewer__actions__inner
后追加元素即可
vue由于是虚拟dom 追加元素必须要等待 dom的渲染完成
也就是必须要在 mounted 钩子完成
但是这个时候 我们不能使用vue的 @click 来绑定事件
到 mounted 这个步骤的时候 vue 已经进行过模板的编译 添加@click 就无法识别
所以这里需要用到原生的方法来添加dom
代码实现
// 需要在页面渲染完后
this.$nextTick(() => {
// 获取对应的 dom元素
var otest = document.querySelector("div.el-image-viewer__actions__inner");
// 创建一个新dom,并设置icon,绑定点击事件
var newEle = document.createElement("i");
newEle.className = "el-icon-download";
newEle.onclick = () => {
window.open(
this.srcList[0] + "?response-content-type=application/octet-stream"
);
};
// 在对应dom 下追加创建的dom
otest.appendChild(newEle);
});
到此为止 即可实现
更多推荐
已为社区贡献2条内容
所有评论(0)