当前位置: 首页 > news >正文

vue3自定义指令来实现 v-lazyImg 功能

v-lazyImg

在 Vue 3 中,可以通过自定义指令来实现v-lazyImg 功能
  • 新建一个名为 lazyImg.ts 的文件,在其中定义一个名为 lazyImg 的自定义指令。
import type { Directive, DirectiveBinding ,App} from 'vue'
import errorImg from './errorSrc.png' // 导入默认错误图片// 交互动画选项配置
let options: {root: HTMLElement | nullthreshold: number
} | null// 交互动画实例
let observer: IntersectionObserver | null = null// 交互动画回调函数,用于处理图片懒加载逻辑
const callback: IntersectionObserverCallback = (entries) => {entries.forEach((entry) => {if (entry.isIntersecting) { // 判断元素是否进入视口const target = entry.target as HTMLImageElement // 获取目标元素(图片let img = target.dataset.src || '' // 从 data-src 属性获取图片真实地址// 图片加载函数const loadImage = (url: string) => {const image = new Image() image.src = url// 图片加载成功image.onload = () => {console.log('图片加载成功');   target.src = urlobserver?.unobserve(target)}// 图片加载失败image.onerror = () => {target.src = errorImgobserver?.unobserve(target)console.log('图片加载失败')}}loadImage(img)}})
}
// 观察处理函数,用于处理指令绑定逻辑
const observerHandler: (el: Element, binding: DirectiveBinding) => void = (el,binding,
) => {if (el.tagName !== 'IMG')returnconst { value } = binding // 获取指令绑定的值el.setAttribute('data-src', String(value)) // 将图片地址存储在 data-src 属性中observer?.observe(el)  // 开始观察元素
}// Vue 自定义指令对象,用于实现图片懒加载功能
const vImgLazyLoad: Directive = {// 在组件卸载前移除观察器,避免内存泄漏beforeUnmount(el: HTMLElement) {if (observer)observer.unobserve(el)},// 在指令绑定到元素时初始化观察器并开始观察mounted(el: HTMLElement, binding:DirectiveBinding) {if (options === null) {options = {root: document.querySelector('html'),  // 视口参考元素threshold: 0.1,  // 元素进入视口 10% 时触发回调}}if (observer === null)  // 创建交互动画实例observer = new IntersectionObserver(callback, options)observerHandler(el, binding)},// 在指令绑定值更新时重新绑定观察逻辑updated(el: HTMLElement, binding: DirectiveBinding) {observerHandler(el, binding)},
}
// 导出函数用于在 Vue 应用中注册指令
export const setupLazyImgDirective = (app: App<Element>) => {app.directive('lazyImg', vImgLazyLoad)}
export default vImgLazyLoad
  • 在 main.ts 中导入directive/index.ts并注册指令。
// directive/index.ts
import type { App } from 'vue'
import {setupLazyImgDirective} from './lazyImg'/*** 导出指令:v-xxx* @methods lazyImg 懒加载图片,用法: v-lazyImg="xxx"*/export const setupPermission = (app: App<Element>) => {setupLazyImgDirective(app)
}
  • vue 组件中中使用
<script setup lang="ts">import {ref} from "vue";const list = Array.from({ length: 100 }).map((_, i) => ({id: i,img: 'https://img1.baidu.com/it/u=837510728,3756639739&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800'}))
</script><template><imgv-for="item in list":key="item.id"v-lazyImg="item.img":style="{ width: '100px', height: '100px', display: 'block' }"/>
</template>
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/213657.html

相关文章:

  • [java]eclipse中windowbuilder插件在线安装
  • 前端大文件分片上传与断点续传方案
  • 将docker数据目录迁移到 home目录下
  • 系统架构中的限流算法(一)
  • Prompt Tuning:优化提示调优全攻略
  • vue+cesium示例:3Dtiles三维模型高度调整(附源码下载)
  • ai学习--python部分-1.变量名及命名空间的存储
  • 【科研绘图系列】R语言绘制柱状图(bar plot)
  • 开源第三方库发展现状
  • 扩容的未来:Web3 并行计算赛道全景图谱
  • webtrees——在线协作家谱
  • OpenCV (C/C++) 实现 Scharr 算子进行边缘检测
  • 新书速览|ASP.NET MVC高效构建Web应用
  • window 显示驱动开发-Direct3D 呈现性能改进(一)
  • Nginx 基本概念深度解析:从服务器特性到代理模式应用​
  • 第12次04 :首页展示用户名
  • 0基础学习Linux之揭开朦胧一面:环境基础开发工具
  • Haproxy 基础知识点
  • 【后端高阶面经:架构篇】46、分布式架构:如何应对高并发的用户请求
  • DeepSeek 赋能教育游戏化:AI 重构学习体验的技术密码
  • 【Volumetric Heatmap热力图插件的使用】
  • python打卡day37
  • 2025/5/26 学习日记 基本/扩展正则表达式 linux三剑客之grep
  • 运行comfyui Wan2.1 文生视频工作流,问题总结
  • 2.BS版使用说明
  • 输入一串字符,统计其中字母的个数
  • SpringBoot整合MyBatis
  • [Godot][游戏开发] 如何在 Godot 中配置 Android 环境(适配新版 Android Studio)
  • 使用 Kotlin 实现 Android 自定义 Lint 检查规则的步骤指南
  • 沉石鱼惊旋