問題場景

1. 後臺不提供富文字儲存，所以emoji表情入庫會報錯
2. 需求要求前端在輸入的時候過濾掉表情符號
3. 全域性的input 和富文字textarea輸入框都需要過濾emoji表情

問題分析

1.每一個input寫事件寫正則校驗程式碼量實在太多了還很麻煩；所以想用自定義全域性指令，就不需要每個用到的地方都去引入了。
2.emoji太多了，並且輸入法的emoji、mac自帶的emoji 、windows自帶的emoji是不一致的。全部emoji列出來一一過濾替換實在不現實，後來發現emoji表情都是2個字元的長度，其他鍵盤輸入都是一個字元的長度。因此用字元長度來校驗可行
3.需要在輸入的時候過濾掉表情符號，那麼就需要在（keyup）鍵盤觸發的時候監聽觸發過濾事件

程式碼實現

js實現輸入框監聽方法 common/utils/emoji'

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) { // 新增監聽事件
    // 判斷是否是emoji圖示
    const isEmoji = char => {
      // 表情都是2個字元
      return char.length > 1;
    }

    const emoji2empty = str => {  // emoji圖示都替換成空字串‘’
      return Array.from(str)
        .filter(c => !isEmoji(c)).join('')
    }
    let $inp = findEle(el, 'input') || findEle(el, 'textarea')  // 判斷繫結元素是否是input輸入框或者富文字輸入框
    el.$inp = $inp 
    $inp.handle = function () {
      let val = $inp.value
      $inp.value = emoji2empty(val)  // 監聽輸入框的emoji圖示轉換成空
      trigger($inp, 'input')
    }
    $inp.addEventListener('keyup', $inp.handle)  // el新增鍵盤監聽事件keyup
    $inp.addEventListener('blur', $inp.handle) // el新增鍵盤失焦事件blur
  },
  unbind: function (el) {  // 取消監聽事件
    el.$inp.removeEventListener('keyup', el.$inp.handle) 
    el.$inp.removeEventListener('blur', el.$inp.handle)
  },
}
export default emoji
 

入口檔案引入emoji並且全域性注入指令

import emoji from './common/utils/emoji';
Vue.directive('emoji', emoji)

使用場景

// 在input框新增v-emoji指令既可
<a-input
        :maxLength="50"
        v-emoji
        autocomplete="off"
        placeholder="請輸入名稱"
        v-model= "form.label" />