vue操作dom并为dom增加点击事件方式
更新时间：2024年04月24日 15:40:12 作者：大松呀
这篇文章主要介绍了vue操作dom并为dom增加点击事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
本文实现的效果是利用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);
});
到此为止 即可实现
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue中dialog对话框是一种常见的组件,用于在用户与应用程序进行交互时显示信息或收集输入,这篇文章主要给大家介绍了关于VUE学习宝典之vue-dialog使用方法的相关资料,需要的朋友可以参考下2024-05-05
今天小编就为大家分享一篇axios向后台传递数组作为参数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue组件通信传值操作,结合实例形式分析了vue.js父子组件通信及兄弟组件通信相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了vue使用websocket及封装过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
今天小编就为大家分享一篇vuex actions传递多参数的处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue element自定义表单验证请求后端接口验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
本文主要介绍了Nginx部署Vue.js前端项目指南,帮助您实现从开发到线上部署的平滑过渡,确保用户能够获得最佳的访问体验,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了vue移动端项目中如何实现页面缓存的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了浅谈vue单页面中有多个echarts图表时的公用代码写法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vuex 是一个专为Vue.js应用程序开发的状态管理模式，集中式存储管理应用的所有组件状态。本文给大家介绍了vuex使用文档，需要的朋友参考下吧2018-01-01
最新评论