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

@H_ 304 _1@目录 一、自定义指令 1、局部注册和使用 2、全局注册和使用 二、自定义指令处理图片加载失败(碎图)

一、自定义指令

vue中除v-model、 v-show 等内置指令之外，还允许注册自定义指令，获取DOM元素，扩展额外的功能。

1、局部注册和使用

注册在组件内的script内的directives内

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

使用时，v-自定义指令名即可

<input ty PE ="text" v-focus>

2、全局注册和使用

在m ai n.js用 Vue.directive ()方法来进行注册, 以后随便哪个.vue文件里都可以直接用v-fofo指令

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
  }
})

所有的.vue文件都可直接使用

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

注意点：

inserted方法 - 指令所在标签, 插入到网页上触发(一次) update方法 - 指令对应数据/标签更新时, 此方法执行，只要更新就触发 el参数为使用此自定义指令的DOM元素 binding参数用来接收传的值，bin gin g.value就是具体值

二、自定义指令处理图片加载失败(碎图)

1、在main.js中注册自定义指令，接收传递的值

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

2、组件中使用自定义指令值处理，

imgDefault1为用户可能出错的图，

imgDefault为正确的图，当用户图地址加载失败时，使用这个默认图，

img1为本地的图片，当用户没有图片数据，或数据为空时，加载此默认图

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

补充：组件内直接使用图片方式

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

到此这篇关于详解Vue自定义指令如何实现处理图片加载失败的碎图的 文章 就介绍到这了,更多相关Vue自定义指令 内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: Vue3实现自定义指令拦截点击事件的示例代码 Vue实现带参数的自定义指令示例 Vue自定义指令详解 Vue实战之掌握自定义指令

总结

以上是 为你收集整理的 详解Vue自定义指令如何实现处理图片加载失败的碎图 全部内容，希望文章能够帮你解决 详解Vue自定义指令如何实现处理图片加载失败的碎图 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于详解Vue自定义指令如何实现处理图片加载失败的碎图的详细内容...