vue 管理のバックグラウンドでは、仮想キーボード コンポーネントを使用して中国語と英語の切り替えをサポートします。

はじめに: 大型のタッチ スクリーン デバイス (デュアル スクリーン デバイスなど) では、操作するためのキーボードがなく、タッチ スクリーン入力またはテキストエリア入力中に値を入力することは不可能であり、入力ボックスの Enter イベントを作成する必要があるので、仮想キーボードを操作するには、
Vue に同様のキーボード コンポーネントがあるかどうかを調べたかったのです。戻る！本物！持っている！

プロジェクト使用フレームワーク: vue+element ui

公式サイト
https://virtual-keyboard.js.org/vuejs

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

ドキュメント
https://hodgef.com/simple-keyboard/getting-started/

黒、白、モバイル、フルキーボード、数字キーボードおよびその他の

実用的なアプリケーション

1. 最初にインストールします

    npm i simple-keyboard -S

2. ここに別の SimpleKeyboard.vue コンポーネントを作成しました。

<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>

ヒント: カスタマイズする必要があるキーがいくつかあるため、それらを mount~ で変更しました。

3. 適用する必要があるページで登録を導入するだけです。

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

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

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

ちょっとしたヒント:
中国語の入力方法を含む記事:
https://www.cnblogs.com/linjiangxian/p/16223681.html#_label1_1