【vue】vue-image-lazy图片懒加载使用与介绍【超详细+npm包源代码】

简介

当前插件是基于vue3，写的一个图片懒加载，文章最下方是npm包的源码，你可以自己拿去研究和修改，如有更好的想法可以留言，如果对你有帮助，可以点赞收藏和关注，谢谢。
后续会添加图片放大和切换图片等功能

配置

使用imageLazy组件的配置

字段	类型	默认值	描述
src	String	“”	图片源地址，同原生属性一致
imgList	String[]	[]	开启图片预览功能
loadingColor	String	“#2dbff1”	加载图标主题颜色
errorColor	String	“888888”	加载图标主题颜色
imgStyle	String	“”	图片样式
key	String-Number	0	图片索引

安装

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

第一个写法直接用自定义命令

第二个写法用组件

最终效果

特别注意

如果你制作自己的插件时，用图标时，font-family字体，千万别用默认字体，改为你自己自定义的图标。如果你不改，别人在使用你的插件时，可能其他插件字体或本地字体覆盖你的插件，时用户体验感降低

自定义字体步骤如下:

1. iconfont.css文件
   
   修改为
   

2. 项目中使用

<i class="icon iconfont icon-tupianjiazaishibai"></i>
改为
<i class="icon image-lazy-iconfont icon-tupianjiazaishibai"></i>

源码

插件项目源码

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

$个人主页：$ 沉默小管

$个人网站：$ 沉默小管

$个人导航网站：$ 沉默小管导航网

$我的开源项目：$ vueCms.cn

$技术交流QQ群：837051545$

$点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教