Vue自定义指令 详解

vue的基本指令

自定义指令另一种方式,往往在实际工作中,自定义的指令会比较多,抽离成一个单独的文件,再全局注册,此时需要用到循环注册(同样适用与过滤器)

代码如下:

// 导入自定义指令文件src/directives/index.js中
import directiveJs from '@/directives'

// 全局注册 自定义指令
// 遍历  文件导入的 对象
// 方式一:for循环
// for (const k in directiveJs) {
//   Vue.directive(k, directiveJs[k])
// }

// 方式二:
// Object.keys({a:1,b:2})==>[a,b]
// Object.values({a:1,b:2})==>[1,2]
// Object.entries({a:1,b:2})==>[[a,1],[b,2]]


Object.keys(directiveJs).forEach((item) => {
  // item是对象中的每一项属性名(此处为一个变量值,所以用[])
  Vue.directive(item, directiveJs[item])
})

// 自定义指令  定义后在main中导入 全局注册 使用时v-指令名

// 导入枚举数据
import employeesDate from '@/api/constant/employees'

export default {
  // 1. 处理错误图片显示不出来的问题
  imgError: {
    // dom渲染完毕的钩子函数
    inserted(dom, obj, vnode) {
      // 当图片存在时用该图片 否则用自定义的图片
      dom.src = dom.src || obj.value
      // 图片加载错误时的监听事件
      dom.onerror = function() {
        dom.src = obj.value
      }
    },
    // 更新完成后的钩子函数
    componentUpdated(dom, obj) {
      dom.src = dom.src || obj.value
      // 加载错误的监听会一直监听到,不需重复监听
    },
    // 销毁前 撤掉监听错误事件
    unbind(dom) {
      dom.onerror = null
    }
  },


  // 2.处理枚举的数据 聘用形式 (employeesDate是一个数组,数组的每一项为对象,其中有hireType用来处理聘用形式 字段,hireType其中属性id与与原始的数据相对应,属性value是需要处理后显示的)
  formatterFormOf: {
    inserted(dom, obj) {
      // 数组的find方法 找到符合条件的项
      const temp = employeesDate.hireType.find((item) => {
        return item.id === obj.value
      })
      dom.innerText = temp ? temp.value : '-'
    },
    componentUpdated(dom, obj) {
      // 数组的find方法 找到符合条件的项
      const temp = employeesDate.hireType.find((item) => {
        return item.id === obj.value
      })
      dom.innerText = temp ? temp.value : '-'
    }
  }
}