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
如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!