VueUse
VueUse是一个十分方便的Vue工具库，大大的提高了工作效率，官网地址：vueuse.org/
利用vueuse简单实现vue懒加载指令实现
传统的图片懒加载通过滚动偏移计算，纯手写的话有一定的代码量，所以这里打算用vueuse写一个自定义指令。
下载VueUse
创建懒加载指令
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| $ "
// /directives/imgLazy.js
// 文档地址：[useIntersectionObserver | VueUse](https://vueuse.org/core/useIntersectionObserver/)
import { useIntersectionObserver } from '@vueuse/core';
export default {
bind(el, bidding) {
const { stop } = useIntersectionObserver(
el,
([{ isIntersecting }], observerElement) => {
// 滚动到范围，isIntersecting为true
if(isIntersecting){
let defaultSrc = el.getAttribute('data-img');
// 直接赋值src会被识别为静态文件，用require关键字可以解决，require关键字只接收字符串不支持变量，所以这里用了字符串模板拼接。
el.src = require(`@/assets/${defaultSrc}`);
el.removeAttribute("data-img");
// 这里建议调用stop回调，默认情况滚动到区域以外也会被触发。
stop();
}
},
)
}
}
"
|
批量注入自定义指令（全局）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| $ "
// /directives/index.js
import debounce from "./debounce";
import imgLazy from "./imgLazy"; // 自定义指令
const directives = {
debounce,
imgLazy
};
export default {
install(Vue) {
Object.keys(directives).forEach((key) => {
Vue.directive(key, directives[key])
})
},
}
// main.js
// 自定义指令 批量导入
import Directives from '../directives/index'
Vue.use(Directives)
"
|
没有到范围区域统一默认显示加载图片(这里先用的vue的logo)，从network资源观察只有一个图片请求。
使用自定义指令
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
| $ "
<template>
<div>
<div class="imgBox">
<div class="p_margin-top-1500px">
<img v-for="(item,index) in bannerArr" :key="index"
src="../../assets/logo.png"
:data-img="item"
alt="banner"
v-img-lazy>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
bannerArr: ['banner1.png', 'banner2.png', 'banner3.png']
}
}
}
</script>
"
|
图片元素增加自定义指令”v-img-lazy”
