封装全局指令

Vue.directive( id, [definition] )

• 参数：

  • {string} id
  • {Function | Object} [definition] 用法：

注册或获取全局指令。

directives.js中定义指令对象属性

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。有几个指令一次性调用几次
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

export const imageError = {
  // inserted是钩子函数：该定义指令绑定的元素插入到父节点时执行
  inserted(dom, binding) {
    // dom是该指令绑定的元素img
    // binding是一个对象，里面的value是指令绑定的变量
    console.log(dom)
    console.log(binding)
    // 判断图片为空
    // dom.src = dom.src || binding.value
    if (!dom.src) {
      dom.src = binding.value
      return
    }
    // 判断图片加载失败
    // .onerror是img加载失败执行的函数
    dom.onerror = function() {
      dom.src = binding.value
    }
  }
}

在directives/index.js中暴露全部指令

import Vue from 'vue'
import * as directives from '@/directives/directives'
// 统一注册自定义指令
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key])
})

在vue项目中的src中main.js中导入全部指令

import '@/directives'