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

发布时间：2023-02-16 13:10:56 所属栏目：Java 来源：互联网

导读：vue中除v-model、v-show等内置指令之外，还允许注册自定义指令，获取DOM元素，扩展额外的功能。 1、局部注册和使用注册在组件内的script内的directives内 export default { directives:{ focus:{ //自定义指令名 inserted(el){ //el就是使用此指令的DOM元素

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

　　1、局部注册和使用
　　注册在组件内的script内的directives内

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

　　1
　　<input type="text" v-focus>

　　2、全局注册和使用
　　在main.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参数用来接收传的值，binging.value就是具体值

　　二、自定义指令处理图片加载失败(碎图)
　　1、在main.js中注册自定义指令，接收传递的值

　　Vue.directive('imgerror', {
　　 inserted(el, bindings) {
　　    el.onerror = function() { //当图片有地址但是地址没有加载成功的时候会报错会触发图片的一个事件 => onerror
　　      el.src = bindings.value //加载失败, 给一张默认图展示
　　        }
　　    }
　　})
　　2、组件中使用自定义指令值处理，

　　imgDefault1为用户可能出错的图，

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

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

　　
　　<img v-imgerror="imgDefault" :src="imgDefault1 || img1" alt="">
　　补充：组件内直接使用图片方式

　　<script>
　　import defaultImg from '图片路径' //第二种导入
　　export default{
　　    data(){
　　        return{
　　            img1: require('图片路径'), //第一种方式
　　            defaultImg：defaultImg //第二种
　　        }
　　    }
　　}
　　</script>
　　到此这篇关于详解Vue自定义指令如何实现处理图片加载失败的碎图的文章就介绍到这了,更多相关Vue自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

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

（编辑：十堰站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!