在输入框中经常要限制它的可输入范围，一般都是调用onChange事件，然后通过正则表达式来处理输入的内容，这样代码量比较大而且不好维护，所以我们需要自定义一个指令来解决这问题。
新建指令文件
import Vue from 'vue'Vue.directive('emoji', {bind: function (el, binding, vnode) {// 自定义正则表达式var regRule = /[^a-zA-Z0-9]/gel.$handle = function () {let val = el.valueel.value = val.replaceAll(regRule, '')trigger(el, 'input')}el.addEventListener('keyup', el.$handle)},unbind: function (el) {el.removeEventListener('keyup', el.$handle)},});const trigger = (el, type) => {let ev = document.createEvent('HTMLEvents');//创建HTML事件ev.initEvent(type,true,true);//初始化事件，type为事件类型，如inputel.dispatchEvent(ev);//派发事件}let findEle = (parent, type) => {return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)}
注意这里注意，不仅仅要修改值而已，还要触发它绑定的对应事件，否则不会触发双向绑定
写完了在main.js中引入试试
然后就可以在全局页面中使用了
这样就输入非法值以后也会触发双向绑定
