vue3-自定义指令-图片懒加载

skrey

已于 2024-01-11 10:26:54 修改

阅读量504

点赞数 7

分类专栏：前端文章标签： vue.js 前端

于 2024-01-11 10:18:37 首次发布

本文链接：https://blog.csdn.net/qq_39894599/article/details/135508418

版权

vue3-自定义指令-图片懒加载

1. 效果展示

效果展示

2. 类型文件 - `types/lazyImage.ts`

import type {
    ObjectDirective } from 'vue'

export type LazyImageDirective = ObjectDirective

export interface MapItem {
   
  intersectionObserver: IntersectionObserver
  callback: (...args: any) => void
}

export type IntersectionObserverOptions = {
   
  root: Element | null
  rootMargin: string
  threshold: number
}

export type ExtraOptions = {
   
  loadingSrc?: string
  loadingTime?: number
  show: (...args: any) => void
  hide: (...args: any) => void
}

export type BindingValue = ExtraOptions & {
   
  src: string
  options?: IntersectionObserverOptions
}

export type LazyImageOptions = ExtraOptions & {
   
  options: IntersectionObserverOptions
}

3. 全局配置 `config/index.ts`

import {
    LazyImageOptions} from '@/types/lazyImage'
export interface VDConfig {
   
  lazyImage?: LazyImageOptions
}

const config: VDConfig = {
   
  lazyImage: {
   
    loadingTime: 500,
    show: () => {
   },
    hide: () => {
   <