El fondo de administración de vue utiliza un componente de teclado virtual para admitir el cambio entre chino e inglés.

Prefacio: en dispositivos de pantalla táctil grandes (como dispositivos de pantalla dual), no hay teclado para operar y es imposible ingresar valores durante la entrada de pantalla táctil o de área de texto, y no hay forma de activar el ingrese el evento del cuadro de entrada, por lo que es necesario crear. Para operar un teclado virtual,
quería saber si Vue tiene un componente de teclado similar. ¡devolver! ¡real! ¡tener!

Marco de uso del proyecto: vue + elemento ui

Sitio web oficial
https://virtual-keyboard.js.org/vuejs

Ejemplo
https://hodgef.com/simple-keyboard/demos/

Documentación
https://hodgef.com/simple-keyboard/getting-started/

Negro, blanco, móvil, teclado completo, teclado numérico y otras

aplicaciones prácticas

1. Instalar primero

    npm i simple-keyboard -S

2. Escribí un componente SimpleKeyboard.vue por separado aquí.

<template>
  <div :class="keyboardClass"></div>
</template>

<script>
import Keyboard from "simple-keyboard";
import "simple-keyboard/build/css/index.css";

export default {
    
    
  name: "SimpleKeyboard",
  props: {
    
    
    keyboardClass: {
    
    
      default: "simple-keyboard",
      type: String,
    },
    input: {
    
    
      type: String,
    },
    layout: {
    
    
      type: Object,
      default: function () {
    
    
        return {
    
    
          default: [
            "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
            "{tab} q w e r t y u i o p [ ] \\",
            "{lock} a s d f g h j k l ; ' {enter}",
            "{shift} z x c v b n m , . / {shift}",
            "@ {space}",
          ],
          shift: [
            "~ ! @ # $ % ^ &amp; * ( ) _ + {bksp}",
            "{tab} Q W E R T Y U I O P { } |",
            '{lock} A S D F G H J K L : " {enter}',
            "{shift} Z X C V B N M &lt; &gt; ? {shift}",
            "@ {space}",
          ],
        };
      },
    },
  },
  data: () => ({
    
    
    keyboard: null,
  }),
  mounted() {
    
    
    this.keyboard = new Keyboard(this.keyboardClass, {
    
    
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
    });
    this.keyboard.setOptions({
    
    
      layoutName: "default",
      layout: this.layout,
      display: {
    
    
        "{enter}": "close",
        "{shift}": "shift",
        "{bksp}": "del",
        "{tab}": "tab",
        "{space}": "space",
        "{lock}": "caps",
      },
    });
  },
  methods: {
    
    
    onChange(input) {
    
    
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
    
    
      this.$emit("onKeyPress", button);

      /**
       * If you want to handle the shift and caps lock buttons
       */
      if (button === "{shift}" || button === "{lock}") this.handleShift();
    },
    handleShift() {
    
    
      let currentLayout = this.keyboard.options.layoutName;
      let shiftToggle = currentLayout === "default" ? "shift" : "default";

      this.keyboard.setOptions({
    
    
        layoutName: shiftToggle,
      });
    },
  },
  watch: {
    
    
    input(input) {
    
    
      this.keyboard.setInput(input);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Consejos: debido a que tengo varias claves que debo personalizar, las modifiqué en montado ~

3. Simplemente introduce el registro en la página donde necesitas solicitarlo.

   <!-- 全键盘组件 -->
      <div class="keyboard-mask">
        <SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input"/>
      </div>     

     onChange(input) {
    
    
      // input 是当前点击按钮的值
     },

    onKeyPress(button) {
    
    
      if (button == "{enter}") {
    
    
      	// 如果按确认键的相应操作
      }
      if (button == "{bksp}") {
    
    
       // 删除键的相应操作
      }
    },

Pequeños consejos:
artículos que contienen métodos de entrada en chino:
https://www.cnblogs.com/linjiangxian/p/16223681.html#_label1_1