vue操作dom并為dom增加點(diǎn)擊事件方式
本文實(shí)現(xiàn)的效果是利用js 在element圖片放大后新增加一個(gè)下載的按鈕 效果如下
實(shí)現(xiàn)效果
環(huán)境
項(xiàng)目中采用 vue + element 的方式
圖片放大預(yù)覽主要借助 element里面內(nèi)部的一個(gè)未公開組件
有興趣的小伙伴可以自行查看源碼
分析過程
打開控制臺后 發(fā)現(xiàn)這里實(shí)際 是在一個(gè)名字為el-image-viewer__actions__inner 的 class 下追加一個(gè) i 元素的標(biāo)簽 ，icon 使用element自帶的圖標(biāo)即可
分析可以得知，我們只需要在 class el-image-viewer__actions__inner 后追加元素即可
vue由于是虛擬dom 追加元素必須要等待 dom的渲染完成
也就是必須要在 mounted 鉤子完成
但是這個(gè)時(shí)候 我們不能使用vue的 @click 來綁定事件
到 mounted 這個(gè)步驟的時(shí)候 vue 已經(jīng)進(jìn)行過模板的編譯 添加@click 就無法識別
所以這里需要用到原生的方法來添加dom
代碼實(shí)現(xiàn)
// 需要在頁面渲染完后
this.$nextTick(() => {
// 獲取對應(yīng)的 dom元素
var otest = document.querySelector("div.el-image-viewer__actions__inner");
// 創(chuàng)建一個(gè)新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);
});
到此為止 即可實(shí)現(xiàn)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE學(xué)習(xí)寶典之vue-dialog使用方法
在Vue中dialog對話框是一種常見的組件,用于在用戶與應(yīng)用程序進(jìn)行交互時(shí)顯示信息或收集輸入,這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)寶典之vue-dialog使用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
今天小編就為大家分享一篇axios向后臺傳遞數(shù)組作為參數(shù)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue組件通信傳值操作,結(jié)合實(shí)例形式分析了vue.js父子組件通信及兄弟組件通信相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了vue使用websocket及封裝過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇vuex actions傳遞多參數(shù)的處理方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue element自定義表單驗(yàn)證請求后端接口驗(yàn)證
這篇文章主要介紹了vue element自定義表單驗(yàn)證請求后端接口驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Nginx部署Vue.js前端項(xiàng)目的實(shí)現(xiàn)
本文主要介紹了Nginx部署Vue.js前端項(xiàng)目指南,幫助您實(shí)現(xiàn)從開發(fā)到線上部署的平滑過渡,確保用戶能夠獲得最佳的訪問體驗(yàn),感興趣的可以了解一下2024-09-09
vue移動端項(xiàng)目中如何實(shí)現(xiàn)頁面緩存的示例代碼
這篇文章主要介紹了vue移動端項(xiàng)目中如何實(shí)現(xiàn)頁面緩存的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
淺談vue單頁面中有多個(gè)echarts圖表時(shí)的公用代碼寫法
這篇文章主要介紹了淺談vue單頁面中有多個(gè)echarts圖表時(shí)的公用代碼寫法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vuex 是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式，集中式存儲管理應(yīng)用的所有組件狀態(tài)。本文給大家介紹了vuex使用文檔，需要的朋友參考下吧2018-01-01