Vue3自定义指令

本文已参与[新人创作礼]活动，一起开启掘金创作之路

一.描述

vue2具体请到这里查看juejin.cn/post/708981…

vue2与vue3的自定义指令有了很大的出入

在这里我们依旧使用自定义获得焦点事件来开启我们自定义指令的学习

1.全局

const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  mounted(el) {
    // Focus the element
    el.focus()
  }
})

2.局部

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

<input v-focus />

二.钩子函数

这里我们分别列出vue2和vue3的钩子函数可以明显看出差异

三.参数

 el、binding、vnode 和 prevNnode

想了解vnode 和 prevNnode请看www.javascriptc.com/vue3js/guid…

四.举例：图片懒加载

步骤

  1-监听图片img====使用usecore中的api
  
  2-判断图片是否加载失败，如果加载失败===显示默认图片
  
    加载失败函数：onerror
 

import defaultImg from "@/assets/images/200.png";
import { useIntersectionObserver } from "@vueuse/core";
export default {
  install(Vue) {
    Vue.directive("lazyImg", {
      mounted(el, binding) {
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting =>判断是否进入到可视区域
            // console.log(isIntersecting, 88);
            if (isIntersecting) {
              // 表示第一次进入
              stop();
              el.onerror = function () {
               // console.log(22222);
                // 图片加载失败就会进入
                el.src = defaultImg;
              };
              /*加载成功 */
              el.src = binding.value;
            }
          }
        );
      },
    });
  },
};

使用

     <img v-lazyImg="item.picture" :src="item.picture" alt="" />