vue自定义指令的实际应用----处理错误的图片

阿杰啊
227 阅读2分钟

当我们在使用vue调用接口获取数据，如果数据出了问题，比如获取用户的头像，如果获取失败，则会显示一个图片破损的默认图片，我们可以利用自定义属性的特性，监听获取头像的状态，如果出错，展示我们自定义的图片而不是系统默认的。

自定义指令的使用

//1.首先在系统中创建一个专门用于存储自定义指令的js文件,定义一个自定义指令
    export const 自定义指令名称(后面在dom中使用的时候也是写它) = {
          //上面这步是创建一个自定义指令并向外导出
          inserted(dom,options){
              //inserted函数在绑定该自定义指令的元素插入DOM时被执行,有两个形参，第一个返回绑定的DOM对象，options返回指令的表达式
              //这里我们用图片出错的时候更换图片为例，当图片出错的时候，会触发元素的onerror方法：
              dom.onerror = function(){
                  //这里面写当图片调用出现错误的时候需要执行的函数
                  //我们定义DOM的src也就是图片的src属性为options的value属性值 这里的值是存储在DOM所在vue文件中的data属性里面的
                  dom.src = options.value
              }
          }
    }

2.注册自定义指令

//以中台项目为例在main.js中注册自定义指令。
//考虑到之后我们可能会添加不止一个指令，如果我们用最原始的import 导入指令再一个一个注册，效率会很低。
//因此我们用一个语法，直接导入到main中，然后得到一个对象，再对这个对象进行遍历，执行注册语句，完成所有指令的注册。
import * as drectives from '@/drective'
//这句代码的意思就是将@/drective中所有的指令都存储到drectives中导入到main中
//遍历对象
Object.keys(directives).forEach(key=>{
    //这里对象遍历出来的是一个数组，因此我们还要在对象的基础上遍历数组
    Vue.drective(key,directives[key])
    //vue.drecive(指令名称，指令操作)
})

3.使用自定义指令

<img v-imageerror="image" :src="staffPhoto">

//记得在下面的data中设置图片出错时显示的src地址
data(){
    return{
    image:require('@/xxx/xxx')
    //这里的变量名称需要跟自定义属性的值保持一致
    //在vue中的js引入图片地址，需要用到require来引入，不然可能会导致解析出错
    }
}
avatar
文章
阅读
粉丝