vue实现输入框只能英文输入法

您可以在输入框的事件中监听输入法的变化，然后通过判断输入法的类型来限制输入的内容。具体代码如下：

<template>
  <div>
    <input type="text" @compositionstart="handleCompositionStart" @compositionupdate="handleCompositionUpdate" @compositionend="handleCompositionEnd" @keydown="handleKeydown" />
  </div>
</template>

<script>
export default {
  methods: {
    handleCompositionStart() {
      this.isComposing = true
    },
    handleCompositionUpdate(e) {
      if (e.target instanceof HTMLInputElement) {
        const composingText = e.target.value.substr(e.target.selectionStart, e.target.selectionEnd - e.target.selectionStart)
        if (/^[a-zA-Z]*$/.test(composingText)) {
          this.isComposingEnglish = true
        } else {
          this.isComposingEnglish = false
        }
      }
    },
    handleCompositionEnd(e) {
      this.isComposing = false
      this.isComposingEnglish = false
    },
    handleKeydown(e) {
      if (this.isComposing) {
        return
      }
      if (!this.isComposingEnglish) {
        if (e.key.length === 1 && !/^[a-zA-Z]*$/.test(e.key)) {
          e.preventDefault()
        }
      }
    },
  },
  data() {
    return {
      isComposing: false,
      isComposingEnglish: false,
    }
  },
}
</script>

这里主要是对 `@compositionupdate` 事件进行监听，通过正则表达式判断正在输入的文字是否为英文。如果是英文，则将 `isComposingEnglish` 标记为 true，否则标记为 false。在 `@keydown` 事件中，如果正在输入中文，则禁止输入非英文字符。