簡介

當(dāng)前插件是基于vue3，寫的一個圖片懶加載，文章最下方是npm包的源碼，你可以自己拿去研究和修改，如有更好的想法可以留言，如果對你有幫助，可以點(diǎn)贊收藏和關(guān)注，謝謝。
后續(xù)會添加圖片放大和切換圖片等功能

使用

1. 安裝

npm i vue-image-lazy-xg --save

2. 引入
   main.ts

// script
import { createApp } from 'vue';
import App from './App.vue';
import imageLazy from "vue-image-lazy-xg"
import "vue-image-lazy-xg/lib/style.css"const app = createApp(App);
app.use(imageLazy); //全局注冊
//配置可有可有無
//app.use(imageLazyLoading,{
//    loadingGif:"加載的圖片",
//    errorImg:"錯誤的圖片",
//})
app.mount('#app');

3. App.vue

第一個寫法直接用自定義命令

<template><div class="app-container"><imgclass="img"v-for="item in result":key="item.picture"v-img-lazy="item.picture"/></div>
</template><script setup lang="ts">
import {ref} from "vue";const result = [{ picture:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg'},{ picture:'1111111111111'},{ picture:'2222222222222222'},{ picture:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg'},{picture:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg'},{picture:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg'}]
</script>

第二個寫法用組件

<template><div class="app-container"><!--默認(rèn)使用方法--><imageLazyv-for="(item,key) in result"class="img":key="key":src="item.picture"/><!--自定義錯誤圖標(biāo)--><imageLazyv-for="(item,key) in result"class="img":key="key":src="item.picture":lazy="true"><template #error><i :style="'font-size:58px;color:red'" class="icon iconfont icon-tupianjiazaishibai"></i></template></imageLazy></div>
</template><script setup lang="ts">
import {ref} from "vue";const result = [{ picture:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg'},{ picture:'1111111111111'},{ picture:'2222222222222222'},{ picture:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg'},{picture:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg'},{picture:'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg'}]
</script>

最終效果

源碼

插件項(xiàng)目源碼

?$踩坑不易，還希望各位大佬支持一下$

📃 $個人主頁：$ 沉默小管

📃 $個人網(wǎng)站：$ 沉默小管

📃 $個人導(dǎo)航網(wǎng)站：$ 沉默小管導(dǎo)航網(wǎng)

📃 $我的開源項(xiàng)目：$ vueCms.cn

🔥 $技術(shù)交流QQ群：837051545$

👍 $點(diǎn)贊，你的認(rèn)可是我創(chuàng)作的動力！$

?? $收藏，你的青睞是我努力的方向！$

?? $評論，你的意見是我進(jìn)步的財富！$

如果有不懂可以留言，我看到了應(yīng)該會回復(fù)
如有錯誤，請多多指教