5.16 自定义指令

目标： 通过自定义指令的形式解决异常图片的处理

注册自定义指令

Vue.directive('指令名称', {
    // 会在当前指令作用的dom元素 插入之后执行
    // options 里面是指令的表达式
    inserted: function (dom,options) {
        
    }
})

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

首先定义第一个自定义指令 v-imagerror

// 需要定义指令
export const imageerror = {
  inserted(dom, options) {
    //   图片异常的逻辑
    //  监听img标签的错误事件  因为图片加载失败 会触发  onerror事件
    dom.onerror = function() {
      // 图片失败  赋值一个默认的图片
      dom.src = options.value
    }
  }
}

然后，在**main.js**中完成对于该文件中所有指令的全局注册

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

针对上面的引入语法 import * as 变量 得到的是一个对象**{ 变量1：对象1，变量2： 对象2 ... }**, 所以可以采用对象遍历的方法进行处理

指令注册成功，可以在**navbar.vue**中直接使用了

<img v-imageerror="defaultImg" :src="staffPhoto" class="user-avatar">

 data() {
    return {
      defaultImg: require('@/assets/common/head.jpg')
    }
  },

本节任务：实现一个自定义指令，解决图片加载异常的问题

最后

以上就是靓丽台灯为你收集整理的5.16 自定义指令的全部内容，希望文章能够帮你解决5.16 自定义指令所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。