详解Vue自定义指令如何实现处理图片加载失败的碎图

export default {
   directives:{
     focus:{ //自定义指令名
       inserted(el){ //el就是使用此指令的DOM元素，此处el指这个input框
         el.focus() //此el对应的DOM元素自动获取焦点
       }
     }
   }
};

<input type="text" v-focus>

Vue.directive('Color', {
  inserted(el, binding) { //el代表此DOM元素，binding.value接收传递过来的参数
    el.style.color = binding.value //给此DOM元素设置文字颜色
  },
  update(el, binding) { //使用此指令的DOM更新就执行此方法
    el.style.color = binding.value
  }
})

<!-- 传参为字符串" '颜色值' " 或 "变量" -->
<p v-Color="'red'" >修改文字颜色</p>

Vue.directive('imgerror', {
  inserted(el, bindings) {
    el.onerror = function() { //当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
      el.src = bindings.value //加载失败, 给一张默认图展示
        }    
    }    
})

<!--v-imgerror指令传值加载失败时的图，:src逻辑与之后的img1为没有图片数据时加载的默认图   -->
<img v-imgerror="imgDefault" :src="imgDefault1 || img1" alt="">

<script>
import defaultImg from '图片路径' //第二种导入
export default{
    data(){
        return{
            img1: require('图片路径'), //第一种方式
            defaultImg：defaultImg  //第二种
        }
    }
}
</script>