自定义指令本身

路径: src/directives/index.js

// 项目所有自定义指令
export const imageerror = {
    // inserted 当前dom插入到节点就执行
    inserted(dom, options) {
        // dom就是当前dom元素-图片
        dom.onerror = function() {
        // 图片获取出错事件,出错就把传入的数据赋值dom(图片)元素的src
            dom.src = options.value
        }
        
    },
}

man.js 循环引入所有自定义指令

import * as directives from '@/directives' // 引入自定义指令

// Object.keys 转化为数组,并用forEach循环数组
Object.keys(directives).forEach(key => {
  // 注册全局指令,key就是指令名称(循环的对象属性) directives[key]是值
  Vue.directive(key, directives[key])
})

组件中使用自定义指令 v-imageerror

       <img
            v-imageerror="defaultAvatar" //自定义指令传入一个默认图片
            :src="staffPhoto"
            class="user-avatar"
          />
          
   data() {
    return {
      defaultAvatar: require('@/assets/common/head.jpg'), // 图片路径
    };
  },