简介
当前插件是基于vue3,写的一个图片懒加载,文章最下方是npm包的源码,你可以自己拿去研究和修改,如有更好的想法可以留言,如果对你有帮助,可以点赞收藏和关注,谢谢。
后续会添加图片放大和切换图片等功能
使用
- 安装
npm i vue-image-lazy-xg --save
- 引入
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');
- App.vue
第一个写法直接用自定义命令
<template>
<div class="app-container">
<img
class="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">
<!--默认使用方法-->
<imageLazy
v-for="(item,key) in result"
class="img"
:key="key"
:src="item.picture"
/>
<!--自定义错误图标-->
<imageLazy
v-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>