使用vue3指令封裝一個圖片預覽功能
最近公司搭建了一個新的 vue3 項目，因為項目中有很多模塊用到了圖片預覽功能，項目的 ui 框架用的是element-plus,框架自帶 el-image 組件里面帶了圖片預覽功能，但是當時我不想用這個組件，所以就借鑒了它里面預覽圖片組件的代碼。
復習vue3指令的寫法
簡單的例子
<div v-color="red"> 我是紅色的文字</div>
app.directive('color', (el, binding) => {
// 這會在 `mounted` 和 `updated` 時都調(diào)用
el.style.color = binding.value
})
這時候 div 里面的文字都變成紅色， v-color="yellow" 就變成了黃色
相關(guān)參數(shù)介紹
el：指令綁定到的元素。這可以用于直接操作 DOM。binding：一個對象，包含以下屬性。value：傳遞給指令的值。例如在v-my-directive="1 + 1"中，值是2。oldValue：之前的值，僅在beforeUpdate和updated中可用。無論值是否更改，它都可用。arg：傳遞給指令的參數(shù) (如果有的話)。例如在v-my-directive:foo中，參數(shù)是"foo"。modifiers：一個包含修飾符的對象 (如果有的話)。例如在v-my-directive.foo.bar中，修飾符對象是{ foo: true, bar: true }。instance：使用該指令的組件實例。dir：指令的定義對象。vnode：代表綁定元素的底層 VNode。prevNode：代表之前的渲染中指令所綁定元素的 VNode。僅在beforeUpdate和updated鉤子中可用。
新建 previewImageDirective.ts 文件
導入相關(guān)函數(shù)及類型，編寫基本的指令代碼
import { DirectiveBinding, h, render } from 'vue';
import { ElImageViewer } from 'element-plus';
export default function (app) {
app.directive('previewImage', {
mounted(el: HTMLElement, binding: DirectiveBinding) {
// 邏輯操作
},
});
}
DirectiveBindingel的類型h將組件代碼轉(zhuǎn)成 vnoderender將 vnode 渲染成 html
下面開始編寫相關(guān)指令代碼
首先我們需要創(chuàng)建一個 div 用來包裹我們的預覽組件，我們來控制這個 div 的顯示隱藏來實現(xiàn)預覽組件的彈出和隱藏。
為什么這幾個變量為啥要定義成全局的，如果寫在指令內(nèi)部 v-previewImage="" 多次 就出現(xiàn)多個變量，和多個組件，造成了資源浪費，然后ElImageViewer組件一個頁面要寫多次還會出現(xiàn)一個錯誤
我給 element 提了issues，現(xiàn)在已經(jīng)修復，但還是推薦我這種寫法
const previewBox = document.createElement('div'); // 創(chuàng)建節(jié)點
previewBox.classList.add('preview-box'); // 給 div 增加類名
let vnode; // 存放 vnode 的變量
編寫指令內(nèi)部代碼
第一步給圖片綁定點擊事件并給圖片添加樣式，當鼠標滑過添加小手的樣式
export default function (app) {
app.directive('previewImage', {
mounted(el: HTMLElement, binding: DirectiveBinding) {
el.addEventListener('click', () => {
el.style.cursor = 'pointer';
})
},
});
}
第二步 使用 h 函數(shù) 渲染組件 將組件代碼轉(zhuǎn)成 vnode
export default function (app) {
app.directive('previewImage', {
mounted(el: HTMLElement, binding: DirectiveBinding) {
el.addEventListener('click', () => {
el.style.cursor = 'pointer';
})
vnode = h(ElImageViewer, {
urlList: [binding.value], // 圖片地址
hideOnClickModal: true, // 允許點擊遮罩層關(guān)閉
});
},
});
}
第三步 使用 render 函數(shù)將 vnode 渲染到我們創(chuàng)建的div 里面，并且將我們創(chuàng)建的 div 插入到 body 里面
export default function (app) {
app.directive('previewImage', {
mounted(el: HTMLElement, binding: DirectiveBinding) {
el.addEventListener('click', () => {
el.style.cursor = 'pointer';
})
vnode = h(ElImageViewer, {
urlList: [binding.value], // 圖片地址
hideOnClickModal: true, // 允許點擊遮罩層關(guān)閉
});
render(vnode, previewBox); // 將 vnode 渲染成 html
document.body.appendChild(previewBox); // 將 html 插入到 body 標簽里面
},
});
}
到現(xiàn)在為止我們點擊圖片組件已經(jīng)可以正常的顯示了
第四步當點擊遮罩層關(guān)閉的時候?qū)⑽覀儎?chuàng)建的 div 移除掉就 ok 了
export default function (app) {
app.directive('previewImage', {
mounted(el: HTMLElement, binding: DirectiveBinding) {
el.addEventListener('click', () => {
el.style.cursor = 'pointer';
})
vnode = h(ElImageViewer, {
urlList: [binding.value], // 圖片地址
hideOnClickModal: true, // 允許點擊遮罩層關(guān)閉
onClose: () => {
el.removeEventListener('click', () => {}); // 移除
document.body.removeChild(previewBox);
},
});
render(vnode, previewBox); // 將 vnode 渲染成 html
document.body.appendChild(previewBox); // 將 html 插入到 body 標簽里面
},
});
}
將文件導入到 main.ts中
將文件導入 main.ts中然后調(diào)用我們導入的方法傳入 app 就可以在頁面中使用了
import imageDirective from 'xxxx/previewImageDirective'; const app = createApp(App); imageDirective(app)
ok 上面就是完整代碼，這樣一個圖片預覽指令就完成了
以上就是使用vue3指令封裝一個圖片預覽功能的詳細內(nèi)容，更多關(guān)于vue3圖片預覽的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
關(guān)于vue利用postcss-pxtorem進行移動端適配的問題
這篇文章主要介紹了關(guān)于vue利用postcss-pxtorem進行移動端適配的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了詳細解讀VUE父子組件的使用,今天來講一種子父組件深度耦合的方式，使我們不用額外的創(chuàng)建新的組件，也可以達到一些效果，下面與你們分享一下2023-05-05
這篇文章主要介紹了vue學習筆記之過濾器的基本使用方法,結(jié)合實例形式分析了vue.js過濾器的基本功能、用法與操作注意事項,需要的朋友可以參考下2020-02-02
本篇文章主要介紹了淺談Vue SPA 首屏加載優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)滑動解鎖功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了uniapp-vue3項目中引入高德地圖的具體操作,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-05-05
解決vue中無法動態(tài)修改jqgrid組件 url地址的問題
下面小編就為大家分享一篇解決vue中無法動態(tài)修改jqgrid組件 url地址的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue如何禁止打開調(diào)試模式方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了前端vue如何使用高德地圖，幫助大家利用vue調(diào)用其他key，完成需求，感興趣的朋友可以了解下2020-11-11
本篇文章主要介紹了vue-axios使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05