一、准备工作

1. 新建文件对自定义指令进行统一管理

• src/directives/index.js：这个文件负责管理所有的自定义指令；

2. 自定义指令的基本语法

Vue.directive('指令名称', {
    // 会在当前指令作用的dom元素 插入之后执行
    inserted: function (el, binding) {
        // el：绑定指令的元素
        // binding：一个对象，最常用的是 binding.value -> 指令表达式 = 后面的 值
    }
})

二、定义自定义指令【v-img-error】

2.1 方式一 ➡ 使用 Vue.use() 注册

export const imgError = {
    install (Vue) {
        Vue.directive('imgError', {
            inserted (el, binding) {
                // 只有 img 标签绑定才会生效
                if (el.target.tagName !== 'IMG') return;
                
                // src属性不能为空
                el.src = el.src || binding.value;
                
                // 图片加载失败触发的事件
                el.onerror = () => {
                    el.src = binding.value;
                };
            }
        });
    }
};

2.2 方式二 ➡ 使用 Vue.directive() 注册

export const imgError = {
    // 指令对象 会在当前的dom元素插入到DOM节点之后执行
    inserted (el, binding) {
        // el：绑定指令的元素
        // binding：一个对象，最常用的是 binding.value -> 指令表达式 = 后面的 值
        
        // 优化处理：别的元素绑定该指令不生效，只有img才会生效
        if (el.target.tagName !== 'IMG') return;
        
        // src属性不能为空
        el.src = el.src || binding.value;
        
        // 当图片有地址，但是地址没有加载成功的时候，会报错，会触发土拍你的一个事件 => onerror（图片加载失败事件）
        el.onerror = function () {
            // 当图片出现异常的时候，会将指令配置的默认图片设置为该图片的内容
            // dom可以注册error事件
            el.src = binding.value // 这里不能写死
        }
    }
}

三、注册自定义指令

• 在 main.js中进行全局注册；

2.1 方式一 ➡ 使用 Vue.use() 注册

// 导入这个文件中所有的东西，进行重命名
import * as plugins from '@/directives'；
// 注册自定义指令
// 遍历所有的导出的指令对象，完成插件的注册

Object.keys(plugins).forEach(key => {
    // 注册自定义指令插件
    Vue.use(plugins[key]);
});

2.2 方式二 ➡ 使用 Vue.directive() 注册

// 导入这个文件中所有的东西，进行重命名
import * as directives from '@/directives'
// 注册自定义指令
// 遍历所有的导出的指令对象，完成自定义指令全局注册

Object.keys(directives).forEach(key => {
    // 注册自定义指令
    Vue.directive(key, directives[key])
})

四、使用自定义指令

<img v-imgError="defaultImg" :src="xxx">

data () {
    return {
        // 图片懒加载
        defaultImg: require('默认图片的路径')
    }
}