自定义指令的使用

自定义指令的使用

可以在Vue上直接全局注册

例如，当需要获取一张图片时，如果此图片获取出现错误，那么使用自定义指令，获取错误后执行 onerror 函数，就是 图片获取失败的话就设置成默认值

// 全局设置自定义指令
Vue.directive('指令名称',{
	// 会在当前指令作用的dom元素，插入后执行
	// options 里面是指令的表达式
	inserted: function (dom,options) {
		dom.onerror = function() {
			dom.src = options.value
		}
	}
})

也可以用统一的文件管理

export const imagerror = {
  // 会在当指令作用的dom元素 插入后执行
  inserted(dom, options) {
    // options是 指令中的变量的解释  其中有一个属性叫做 value
    // dom 表示当前指令作用的dom对象
    // dom认为此时就是图片
    // 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
    // img标签加载src中的地址失败时会触发执行
    dom.onerror = function() {
      // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
      // dom可以注册error事件
      dom.src = options.value // 这里不能写死
    }
  }
}

export const color = {
  inserted(dom, { value }) {
    dom.style.color = value
  }
}

使用方法

先在入口文件中导入

// 将自定义指令文件中所有的都导出并命名为directives
import * as directives from '@/directives'

Object.keys(directives).forEach(key => {
 // 将文件中的自定义指令都遍历出来全部挂在Vue上
  Vue.directive(key, directives[key])
})

在元素中使用

<img v-imagerror="defaultImg">

// 在date中写上默认需要的的数据 value
data() {
    return {
      defaultImg: require('@/assets/common/head.jpg'),
      color: 'red'
    }
  }