自定义指令
注册自定义指令
Vue.directive('指令名称', {
// 会在当前指令作用的dom元素 插入之后执行
// options 里面是指令的表达式
inserted: function (dom,options) {
}
})
自定义指令可以采用统一的文件来管理 src/directives/index.js
,这个文件负责管理所有的自定义指令
首先定义第一个自定义指令 v-imagerror
export const imageerror = {
// 指令对象 会在当前的dom元素插入到节点之后执行
inserted(dom, options) {
// options是 指令中的变量的解释 其中有一个属性叫做 value
// dom 表示当前指令作用的dom对象
// dom认为此时就是图片
// 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
dom.onerror = function() {
// 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
// dom可以注册error事件
dom.src = options.value // 这里不能写死
}
}
}
在main.js完成自定义指令全局注册
然后,在main.js
中完成对于该文件中所有指令的全局注册
import * as directives from '@/directives'
// 注册自定义指令
// 遍历所有的导出的指令对象 完成自定义全局注册
Object.keys(directives).forEach(key => {
// 注册自定义指令
Vue.directive(key, directives[key])
})
针对上面的引入语法 import * as 变量
得到的是一个对象{ 变量1:对象1,变量2: 对象2 ... }
, 所以可以采用对象遍历的方法进行处理
指令注册成功,可以在navbar.vue
中直接使用了
<img v-imageerror="defaultImg" :src="staffPhoto" class="user-avatar">
data() {
return {
defaultImg: require('@/assets/common/head.jpg')
}
},