vue自定义懒加载指令

• vue自定义指令的方式:

1. 全局注册

const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  // create() {},
  // beforeMount() {},
  // 当被绑定的元素挂载到 DOM 中时……
  mounted(el) {
    // 聚焦元素
    el.focus()
  },
  // unmounted() {}
})

2. 局部注册(配置directives:{}即可)

directives: {
  focus: {
    // create() {},
    // beforeMount() {},
    // 指令的定义
    mounted(el) {
      el.focus()
    },
    // unmounted() {}
  }
}

然后就可以在模板上的任何元素上使用新的v-force指令,就像使用v-on,v-click等指一样

[vue3自定义指令官方文档]https://v3.cn.vuejs.org/guide/custom-directive.html#%E7%AE%80%E4%BB%8B

• 自定义图片懒加载指令

思路:

• 文件名lazy-img.js
• 文件导出为之一函数,接受Vue创建出来的app参数,
• 通过app.directive自定义指令
• 用到一个API ntersectionObserver 详细介绍看MDN地址
• 监听到图片即将进入可视区时,把v-lazy的值赋值为真的的src即可
• 扩展
  • 利用img.onerr() 函数监听图片加载出错,为其设置默认图片
  • 可以给图片的src 设置一个 loading图片 提高用户体验

代码:

export default function(app) {
  app.directive('lazy', {
    mounted(el, binding) {
      const observer = new IntersectionObserver(
        ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 进入可视区停止观察
            observer.unobserve(el)
            // 监听图片加载失败 给其设置一个默认图片
            el.onerror = () => {
              el.src = defaultImg
            }
            // 把指令上的值赋值给el的src熟悉
            el.src = binding.value
          }
        },
        {
          // 交叉多少开始加载
          threshold: 0
        }
      )
      observer.observe(el)
    }
  })
}

效果: