使用自定义指令解决图片异常情况

项目中有时图片显示异常，我们可以使用自定义指令来指定默认图片

自定义指令可以采用统一的文件来管理 src/directives/index.js,这个文件负责管理所有的自定义指令

// 负责管理所有的自定义指令
// 只负责导出指令对象
// 变量名称就是指令名称
export const imageerror = {
  // 指令内容
  // 指令作用在 图片上的 dom是图片对象
  // inserted 在Vue3中也改名 => mounted
  inserted(dom, options) {
    // inserted执行的之后 此时 并没有对 src赋值
    // 图片有地址 但是地址加载图片失败的时候 会执行一个函数  onerror
    dom.src = dom.src || options.value;
    dom.onerror = function () {
      // 监听onerror事件
      // options.value就是指令传过来的值
      dom.src = options.value; // 当图片异常的时候 接收指令传过来的值 让这个值作为头像的备选
    };
    // 只有src有值 并且加载失败才会触发onerror
  },
  // 此钩子会在给image赋值之后执行
  // 这个钩子函数在Vue3中改名了 => updated
  componentUpdated(dom, options) {
    dom.src = dom.src || options.value;
  },
};

在 main.js 完成自定义指令全局注册

如果自定义的指令较多，可以采用批量注册的方式

import * as directives from "@/directives";
// 注册自定义指令
// 遍历所有的导出的指令对象 完成自定义全局注册
Object.keys(directives).forEach((key) => {
  // 注册自定义指令
  Vue.directive(key, directives[key]);
});

指令注册成功后，可以在组件中直接使用了

<template>
  <img v-imageerror="defaultImg" :src="staffPhoto" class="user-avatar" />
</template>
<script>
export default {
  data() {
    return {
      defaultImg: require("@/assets/common/head.jpg"),
    };
  },
};
</script>