vue中使用指令限制input输入

在项目中限制输入框的输入字符是一个很常见的场景。
常见做法如下：
1.监听@input事件在方法中处理
2.封装input组件在组件中处理
如下是监听@input事件的方法
<input
type=“text”
placeholder=“备注信息”
class=“order_input”
v-model=“review_note”
maxlength=“15”
@input=“vaidateEmoji”
/>

        methods：{
        vaidateEmoji () {
      var regRule = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]|\s/g
      this.review_note = this.review_note.replace(regRule, '')
    },
        }

当我们要限制的组件很多的时候就需要在每个组件页面些vaidateEmoji方法。
以上两种方法都不太便利。。。
考虑到vue指令的便利性。尝试用指令来做限制输入，代码如下：

import Vue from 'vue'

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)
}
Vue.directive('noEmoji', {
  bind: function (el, binding, vnode) {
    var regRule = /[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!，。？！…—&$=()-+/*{}[\]]|\s/g
    let $inp = findEle(el, 'input')
    el.$inp = $inp
    $inp.handle = function () {
      let val = $inp.value
      $inp.value = val.replace(regRule, '')

      trigger($inp, 'input')
    }
    $inp.addEventListener('keyup', $inp.handle)
  },
  unbind: function (el) {
    el.$inp.removeEventListener('keyup', el.$inp.handle)
  }
})

以上封装了限制输入表情等非法字符的指令。
在main.js中引入即可将指令注册。
然后组件上指定指令 v-no-emoji即可

<input
          type="text"
          placeholder="备注信息"
          class="order_input"
          v-model="review_note"
          maxlength="15"
          v-no-emoji
        />

以上完成了指令对输入框的限制输入。