博客

参考文章

https://blog.csdn.net/qq_42004292/article/details/111355006

，不过这个文章正则有问题，我试了几个新的emoji都校验不到

我的是vue2.*版本

首先在src文件夹下建个directive，里面存放自己的自定义指令js文件，然后创建emoji子文件夹

在里面创建emoji.js和index.js

emoji.js (加上大概意思注释，我自己用是失去焦点，自己可按自己需求酌情更改)

const 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)
}

const emoji = {
  bind: function(el, binding, vnode) {
    // 正则规则可根据需求自定义
    var regRule = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g
    const $inp = findEle(el, 'input')
    el.$inp = $inp
    // 监听触发内容
    $inp.handle = function() {
      // 取input值
      const val = $inp.value
      // 校验正则
      $inp.value = val.replace(regRule, '')
      trigger($inp, 'input')
    }
    // 添加监听 blur失去焦点触发
    $inp.addEventListener('blur', $inp.handle)
  },
  unbind: function(el) {
    el.$inp.removeEventListener('blur', el.$inp.handle)
  }
}

export default emoji

index.js

import emoji from './emoji'

const install = function(Vue) {
  Vue.directive('emoji', emoji)
}

if (window.Vue) {
  window.emoji = emoji
  Vue.use(install); // eslint-disable-line
}

emoji.install = install
export default emoji

然后在main.js实例化前注册下

这样我们在input上加自定义指令，可以每次失去焦点就去触发校验正则的内容了