vue插件注册和使用

vue插件注册

新建文件 directive.js

//获取节点
let findEle = (parent, type) => {
  return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}
//触发器
const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

//定义一个正则校验方法： 是否为数字
function isNumber(value) {
  const reg = /^[0-9]*$/
  return reg.test(value)
}

//定义插件功能。这里用一个例子，作用是校验输入内容是否数字的，不是数据就报错并清空
const VisNumber = {
  bind: function (el, binding, vnode) {
    // 正则规则可根据需求自定义
    let $inp = findEle(el, 'input')
    el.$inp = $inp
    $inp.handle = function () {
      let val = $inp.value
      //判断
      if (isNumber(val)) {
        //报错
        Message({ type: 'error', message: '存在非数字字符。' })
         //清空
        $inp.value = ""
      }
      trigger($inp, 'input')
    }
    $inp.addEventListener('keyup', $inp.handle)
  },
  unbind: function (el) {
    el.$inp.removeEventListener('keyup', el.$inp.handle)
  },
}

export default{
    //注册插件
     install(Vue) {
          Vue.directive('VisNumber', VisNumber)
     }
}

在main.js 中使用

import directives from "../directives";//校验组件

Vue.use(directives)

在页面使用 app.vue

<el-input
    placeholder="请输入"
    style="width: 200px"
    clearable
    v-VisNumber
></el-input>