Vue3 封装懒加载指令

// 加载失败的显示的图片
import defaultImage from '@/assets/images/200.png';
export default {
install (app) {
// app 上进行扩展 component directive
// 原型方法 app.config.globalProperties
// 定义指令
defineDirective(app);
},
};
// 定义指令
const defineDirective = (app) => {
// 1 图片懒加载指令
// ? 原理: 先存储图片地址 地址不能在src上，当图片进入可视区，将存储的地址 设置给 图片的 src
app.directive('lazy', {
// vue 2.x 监听使用指令的 DOM是否创建号， 钩子函数 inserted
// vue 3.x 钩子函数 mounted
mounted (el, binding) {
// 创建一个 观察对象，用来观察当前使用指令的元素
const observe = new IntersectionObserver(([{isIntersecting}]) => {
if (isIntersecting) {
// 停止观察
observe.unobserve(el);
// 图片 加载 失败
el.onerror = () => {
el.src = defaultImage;
};
// 将指令的值设置给el的src属性
el.src = binding.value;
}
}, {threshold: 0});
// 开启观察
observe.observe(el);
},
});
};

最后

以上就是大意玉米为你收集整理的Vue3 封装懒加载指令的全部内容，希望文章能够帮你解决Vue3 封装懒加载指令所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。