vue项目创建自定义指令处理img地址失效问题

Posted 2022-12-10 SpaceX7_s

在项目中遇见到一个这样的问题，图片来源私有云，后端可以返回了图片的src，但是src已经失效，所以图片不能显示，这个时候可以通过自定义指令解决，传入一个默认的图片来解决图片失效问题

自定义指令:

export const imgerror = 
  //inserted函数会在dom插入节点之后触发
  //dom表示使用自定义指令的元素
  //options是一个对象，value属性可以获取到自定义指令的绑定值
  //比如v-imgerror="num"，value属性就表示num变量对应的值
  inserted(dom, options) 
    // 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
    //当没有url图片地址的时候，不会触发onerror事件
    dom.src = dom.src || options.value;
    dom.onerror = () => 
      // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
      // dom可以注册error事件
      dom.src = options.value;
    ;
  ,
  //inserted只会在组件初始化的时候执行，如果更换头像的时候不上传头像，那么inserted事件是不会执行
  //图片就不能显示默认的图片，我们添加componentUpdated函数
  //该函数会在当前指令作用的组件数据更新后执行
  
  componentUpdated(dom, options) 
    dom.src = dom.src || options.value;
  ,
;

接下来在全局注册该指令
1.在mian.js中引入

import * as directive from 'xxxx'

使用 * as xxx 的意思是，该js文件中的所有对象都会被包裹在一个对象中，该对象为directives

2.全局注册自定义执行，通过循环注册，就可以每次都书写重复代码可，如果后面还需要自定义指令，那么就往directives.js文件中添加即可

Object.keys(directives).forEach(key => 
  Vue.directive(key,directives[key])

)

在组件中使用该自定义指令