[JavaScript知识库]vue 2.x 自定义指令

在项目的 src\directive\index.js
建立根文件, 方便main.js内批量引入

import clc from './clickConfirm'
// 自定义指令
const directives = {
  //   copy
  clc
}
// 批量注册指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  }
}

相同目录下 , 建立自定义指令文件

//clickConfirm.js
import { MessageBox, Message } from 'element-ui'
const clickConfirm = {
  /*
    bind 钩子函数，第一次绑定时调用，可以在这里做初始化设置
    el: 作用的 dom 对象
    value: 传给指令的值，也就是我们要 copy 的值
  */
  bind(el, binding, vnode) {
    const { value, arg, modifiers } = binding
    // console.log(binding, 999)
    // console.log(vnode, 888)
    el.$arg = arg
    // console.log(el.$arg, 1212)
    if (el.$arg === 'AM_1000' || el.$arg === 'AM_1003' || el.$arg === '') {
      //   console.log(111)
      if (el.$arg === 'AM_1000' || el.$arg === '') {
        el.addEventListener('click', tipsUn)
      }
      if (el.$arg === 'AM_1003') {
        el.addEventListener('click', tipsDown)
      }
    } else {
      //   console.log(222)
      el.addEventListener('click', value)
    }
    /* 如果有修饰符 */
    const newModifiers = Object.keys(modifiers)
    // console.log(newModifiers, 789)
    if (newModifiers.length > 0) {
      el.addEventListener('click', (event) => {
        newModifiers.forEach((e) => {
          switch (e) {
            case 'stop':
              //   console.log(1)
              event.stopPropagation()
              break

            case 'prevent':
              //   console.log(2)
              event.preventDefault()
              break

            default:
              break
          }
        })
      })
    }

    function tipsUn() {
      //   console.log(4546)
      MessageBox.confirm('当前平台暂未授权，请激活授权后重试！', {
        cancelButtonText: '我知道了',
        showConfirmButton: false,
        type: 'warning',
        cancelButtonClass: 'btn-custom-cancel',
        customClass: 'safetyAnalysis_messageBox'
      }).catch((err) => {
        console.log(err)
      })
    }
    function tipsDown() {
      //   console.log(4546)
      MessageBox.confirm('授权已到期，请更新授权后重试！', {
        cancelButtonText: '我知道了',
        showConfirmButton: false,
        type: 'warning',
        cancelButtonClass: 'btn-custom-cancel',
        customClass: 'safetyAnalysis_messageBox'
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  // 当传进来的值更新的时候触发
  componentUpdated(el, binding) {
    el.$arg = binding.arg
    // console.log(el.$arg, 7474)
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind(el, binding) {
    const { value, arg, modifiers } = binding
    el.removeEventListener('click', value)
  }
}

export default clickConfirm

使用方法 , 不能使用内联式js

//正确写法
 <div
        v-clc:[authorization].prevent="emitNewFormVisibleShow"
        class="hover_btn"
      >
        <i class="iconfont iconnormal1" />
        <span class="txt">新增</span>
      </div>

//错误写法
<div
        v-clc:[authorization].prevent="$emit('test')"
        class="hover_btn"
      >
        <i class="iconfont iconnormal1" />
        <span class="txt">新增</span>
      </div>

//authorization为全局动态赋值
//prevent为自定义指令的修饰符,可按要求扩展