vue操作dom并為dom增加點(diǎn)擊事件方式
更新時間：2024年04月24日 15:40:12 作者：大松呀
這篇文章主要介紹了vue操作dom并為dom增加點(diǎn)擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
本文實現(xiàn)的效果是利用js 在element圖片放大后新增加一個下載的按鈕 效果如下
實現(xiàn)效果
環(huán)境
項目中采用 vue + element 的方式
圖片放大預(yù)覽主要借助 element里面內(nèi)部的一個未公開組件
有興趣的小伙伴可以自行查看源碼
分析過程
打開控制臺后 發(fā)現(xiàn)這里實際 是在一個名字為el-image-viewer__actions__inner 的 class 下追加一個 i 元素的標(biāo)簽 ，icon 使用element自帶的圖標(biāo)即可
分析可以得知，我們只需要在 class el-image-viewer__actions__inner 后追加元素即可
vue由于是虛擬dom 追加元素必須要等待 dom的渲染完成
也就是必須要在 mounted 鉤子完成
但是這個時候 我們不能使用vue的 @click 來綁定事件
到 mounted 這個步驟的時候 vue 已經(jīng)進(jìn)行過模板的編譯 添加@click 就無法識別
所以這里需要用到原生的方法來添加dom
代碼實現(xiàn)
// 需要在頁面渲染完后
this.$nextTick(() => {
// 獲取對應(yīng)的 dom元素
var otest = document.querySelector("div.el-image-viewer__actions__inner");
// 創(chuàng)建一個新dom,并設(shè)置icon，綁定點(diǎn)擊事件
var newEle = document.createElement("i");
newEle.className = "el-icon-download";
newEle.onclick = () => {
window.open(
this.srcList[0] + "?response-content-type=application/octet-stream"
);
};
// 在對應(yīng)dom 下追加創(chuàng)建的dom
otest.appendChild(newEle);
});
到此為止 即可實現(xiàn)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue開發(fā)Sort組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
這篇文章主要介紹了vue-列表下詳情的展開與折疊案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue用elementui寫form表單時,在label里添加空格操作
這篇文章主要介紹了vue用elementui寫form表單時,在label里添加空格操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家詳細(xì)介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的示例代碼
在 Vue 3 中,Proxy 主要用于 攔截對象的基本操作,包括 屬性讀?。╣et）、修改（set）、刪除（deleteProperty） 等,本文給大家介紹了Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的操作教程,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了Vue項目開發(fā)常見問題和解決方案總結(jié)，幫助大家更好的利用vue開發(fā)，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了vuex數(shù)據(jù)狀態(tài)持久化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue項目首次打開時加載速度很慢的優(yōu)化過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解
今天小編就為大家分享一篇vue vue-Router默認(rèn)hash模式修改為history需要做的修改詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09