2023-07-06 21:06| 来源: 网络整理| 查看: 265

自定义指令 | Vue.js

useIntersectionObserver | VueUse

1. mian.js

// main.js const app = createApp(App) //定义全局指令 app.directive('img-lazy',{ mounted(el,bingding){ // el:指令绑定的哪个元素 // bingding:bingding.value 指令等于号后面绑定的表达式的值图片url console.log(el,bingding.value) // 使用vueuse中useIntersectionObserver监测图片是否进入视口 useIntersectionObserver( el, ([{ isIntersecting }]) => { // console.log(isIntersecting) if(isIntersecting){ //进入视口区域 el.src = bingding.value } }, ) } })

组件使用：

1. 但是，入口文件通常只做一些初始化的事情，不应该包含太多得到逻辑，可以通过插件的方法把懒加载指令封装为插件，main.js入口文件只需要负责注册插件即可

2. useIntersectionObserver对于元素的监听是一直存在的，除非手动停止监听----存在内存浪费，可以在监听的图片第一次完成加载后就停止监听---stop()

优化后的代码为：

封装插件：

// /directives/index.js import { useIntersectionObserver } from '@vueuse/core' // 定义懒加载插件 export const lazyPlugin = { install(app){ // 懒加载指令逻辑 //定义全局指令 app.directive('img-lazy',{ mounted(el,bingding){ // el:指令绑定的哪个元素 // bingding:bingding.value 指令等于号后面绑定的表达式的值图片url console.log(el,bingding.value) // 解构赋值 const {stop} = useIntersectionObserver( el, ([{ isIntersecting }]) => { console.log(isIntersecting) if(isIntersecting){ //进入视口区域 el.src = bingding.value // 在监听的图片第一次完成加载后就停止监听 stop() } }, ) } }) } }

引用并注册：

// main.js // 引用且注册懒加载指令插件 import {lazyPlugin} from "@/directives"; app.use(lazyPlugin)

组件使用：

【本文地址】

公司简介

联系我们