详解Vue自定义指令如何实现处理图片加载失败的碎图
短信预约 -IT技能 免费直播动态提醒
一、自定义指令
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 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.class="lazy" data-src = bindings.value //加载失败, 给一张默认图展示
}
}
})2、组件中使用自定义指令值处理，
imgDefault1为用户可能出错的图，
imgDefault为正确的图，当用户图地址加载失败时，使用这个默认图，
img1为本地的图片，当用户没有图片数据，或数据为空时，加载此默认图
<!--v-imgerror指令传值加载失败时的图，:class="lazy" data-src逻辑与之后的img1为没有图片数据时加载的默认图 -->
<img v-imgerror="imgDefault" :class="lazy" data-src="imgDefault1 || img1" alt="">补充：组件内直接使用图片方式
<script>
import defaultImg from '图片路径' //第二种导入
export default{
data(){
return{
img1: require('图片路径'), //第一种方式
defaultImg：defaultImg //第二种
}
}
}
</script>到此这篇关于详解Vue自定义指令如何实现处理图片加载失败的碎图的文章就介绍到这了,更多相关Vue自定义指令 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
