Input禁止输入法，过滤非中英文

借助API

compositionstart
文本合成系统如 input method editor（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。
compositionend
当文本段落的组成完成或取消时，compositionend 事件将被触发(具有特殊字符的触发，需要一系列键和其他输入，如语音识别或移动中的字词建议)。
compositionupdate
事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）

Vue自定义指令----过滤掉非英文数字

import Vue from 'vue'

Vue.directive('Alphabet', {
    inserted: function (el) {
        const input = el.querySelector('input')
        let lock = false

        input.addEventListener('compositionstart', () => {
            lock = true
        })

        input.addEventListener('compositionend', () => {
            lock = false
            input.value = spaceReplace(input.value)
        })

        input.addEventListener('keyup', () => {
            if (!lock) input.value = spaceReplace(input.value)
        })
    }
})
// 字符替换
function spaceReplace(value) {
    return value.replace('/^A-Za-z0-9/g', '')
}