Vue3图片懒加载封装自定义指令

图片进入视口区域再去加载

1. 创建自定义指令文件夹

首先,创建一个新的文件夹来存放你的自定义指令,例如 directives。在这个文件夹中,你可以创建以下文件:

  • index.js:入口文件。
  • img/imgLazy.js:自定义指令的实现文件。

2. 实现自定义指令

imgLazy.js 中,实现你的自定义指令:

// img/imgLazy.js
//需要使用vueuse的useIntersectionObserver 方法,下载vueuse--npm install @vueuse/core
import { useIntersectionObserver } from '@vueuse/core'
export const imgLazy = {
  mounted(el, binding) {
  // el: 指令绑定的那个元素 img
 // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
    const { stop } = useIntersectionObserver(
      el,
      ([{ isIntersecting }]) => {
        console.log(isIntersecting);
        if (isIntersecting) {
          el.src = binding.value
          // 进入视口区域
          stop()
        }
      }
    )
  }
}

3. 导出指令

index.js 中,导入你的自定义指令:

// /index.js
import { imgLazy } from "./img/imgLazy";
export const lazyPlugin = {
  install(app) {
  // 注册全局自定义指令
    app.directive('img-lazy',imgLazy)
  }
};

4. 使用

在项目主文件中导入并使用:

import { createApp } from 'vue';
//引入懒加载指令插件并且注册
import { lazyPlugin } from '@/directives'

const app = createApp(App);

app.use(lazyPlugin)

app.mount('#app');
 <img v-img-lazy="item.picture" alt="" />

相关推荐

  1. Vue3图片封装定义指令

    2024-06-09 17:36:01       8 阅读
  2. 定义指令实现图片

    2024-06-09 17:36:01       28 阅读
  3. Vue3实现图片

    2024-06-09 17:36:01       12 阅读
  4. Vue图片的实现

    2024-06-09 17:36:01       4 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-09 17:36:01       8 阅读
  2. 【Python教程】压缩PDF文件大小

    2024-06-09 17:36:01       9 阅读
  3. 通过文章id递归查询所有评论(xml)

    2024-06-09 17:36:01       10 阅读

热门阅读

  1. C语言——共用体

    2024-06-09 17:36:01       8 阅读
  2. Docker:镜像命令和容器命令

    2024-06-09 17:36:01       6 阅读
  3. Spring boot SSL证书路径配置

    2024-06-09 17:36:01       8 阅读
  4. MyBatis 延迟加载,一级缓存,二级缓存设置

    2024-06-09 17:36:01       8 阅读
  5. 在 Linux 系统上安装 Android NDK

    2024-06-09 17:36:01       10 阅读
  6. Redis的哨兵机制,一文全解

    2024-06-09 17:36:01       5 阅读
  7. 07.组件间通信-provide-inject(祖孙通信)

    2024-06-09 17:36:01       9 阅读
  8. 常见知识点总结

    2024-06-09 17:36:01       10 阅读
  9. 列表的C++实

    2024-06-09 17:36:01       9 阅读
  10. JZ2440笔记:热插拔驱动

    2024-06-09 17:36:01       6 阅读
  11. 相同的树-力扣

    2024-06-09 17:36:01       9 阅读
  12. TypeScript常见面试题第十一节

    2024-06-09 17:36:01       4 阅读