Vue3 封装懒加载指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 加载失败的显示的图片
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);
},
});
};