vue3中输入框输入过滤表情符号的自定义指令

export default {
  beforeMount(el) {
    // 标记是否是我们手动触发的 input 事件
    let isTriggeredByScript = false

    // 监听 'input' 事件，适用于 input 和 textarea
    const inputElement = el.tagName === 'INPUT' || el.tagName === 'TEXTAREA'
      ? el
      : el.querySelector('input, textarea')

    const changeHandler = () => {
      // 避免无限递归：如果是手动触发的 input 事件，则不执行
      if (isTriggeredByScript) {
        return
      }

      let value = inputElement.value

      // 表情符号的正则表达式
      const emojiReg = /[^0-9a-zA-Z\u4e00-\u9fa5\uf900-\ufa2d\x20\u3002\uff1b\uff0c\uff1a\u201c\u201d\uff08\uff09\u3001\uff1f\u300a\u300b\uff01\uffe5\u2026\u2014\u3010\u3011\u2018\u2019\o~!@%^&*`_+-=\|\[\]\\\"\'\>\?\(\)\{\}]/gi

      // 去除表情符号
      value = value.replace(emojiReg, '')

      // 更新输入框或 textarea 的值
      inputElement.value = value

      // 触发 'input' 事件，避免无限递归
      isTriggeredByScript = true
      const event = new Event('input', { bubbles: true })
      inputElement.dispatchEvent(event)
      isTriggeredByScript = false
    }

    if (inputElement) {
      inputElement.addEventListener('input', (e) => {
        console.log(e, e.target.composing, '中文输入中')
        // 中文再输入中的时候return
        if (e.target.composing) return
        changeHandler()
      })
      inputElement.addEventListener('compositionend', () => {
        console.log('中文输入完成')
        changeHandler()
      })
    }
  },
  beforeUnmount(el) {
    const inputElement = el.tagName === 'INPUT' || el.tagName === 'TEXTAREA'
      ? el
      : el.querySelector('input, textarea')

    if (inputElement) {
      inputElement.removeEventListener('input', () => {})
    }
  }
}