全局指令定义及批量注册/处理图片异常-------批量注册指令

自定义指令语法

/**
 * 封装全局指令
 * 语法：
 * Vue.directive('指令名称', {
    // 会在当前指令作用的dom元素 插入之后执行
    // options 里面是指令的表达式
    //使用时v-指令名称="值"
    //options.value为表达式赋的值
    inserted: function (dom,options) {
    }
})
 */

1.在src下添加文件directives index.js 其中填写自定义指令的第二个参数 按需导出

const imgerror = {
  inserted (dom, options) {
    // 图片加载失败会触发回调函数执行
    dom.onerror = () => {
      // options.value 获取指令绑定的变量值
      dom.src = options.value
    }
  }
}
​
export { imgerror, focus }

2.在main.js批量导入并注册

// 1. 导入全局指令
import * as directs from '@/directives'
​
// 2. 注册全局指令（批量注册多个）
// Object.keys()=>遍历一个对象，把对象上所有的key属性名都放到数组中返回
Object.keys(directs).forEach(name => {
  // 批量注册多个指令
  Vue.directive(name, directs[name])
})