// 图片加载不出来时显示的图片
import defaultImg from '@/assets/images/200.png'
const defineDirective = (app) => {
// 扩展自定义指令
app.directive('lazyload', {
// Vue2规则 :vue.directive('lazyload',{
// inserted () {}
})
// Vue3规则:mounted
mounted(el, bindings) {
// el表示使用指令的DOM元素
// bindings表示指令相关的信息是一个对象
// 指令的功能:实现图片的懒加载
// 1、监听图片进入可视区
const oberver = new IntersectionObserver(([{ isIntersecting }]) => {
if (isIntersecting) {
// 进入了可视区
// 2、给图片的src属性赋值图片的地址
el.src = bindings.value
// 取消图片的监听
oberver.unobserve(el)
// 加载的图片失败了,显示默认的图片地址
el.onerror = () => {
// 显示默认图片
el.src = defaultImg
}
}
})
oberver.observe(el)
}
})
}
export default {
install(app) {
// 自定义指令
defineDirective(app)
}
}