vue2中使用simple-keyboard虚拟键盘

1.导入simple-keyboard组件

我使用的node版本为16.2.0,使用的simple-keyboard版本为3.7.59。

npm i simple-keyboard@3.7.59

2.封装simple-keyboard组件

在components目录下创建公共组件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: {
      type: {
        type: String,
        default: 'zhang'
      }
    },
    data: () => ({
      keyboard: null,
      keyboardClass: 'simple-keyboard',
      layout: {
        // 0 - = {bksp}
        default: [
          "q w e r t y u i o p",
          "{lock} a s d f g h j k l",
          "{123} z x c v b n m {bksp}",
        ],
        123: [
          "1 2 3 {bksp}",
          "4 5 6 0",
          "7 8 9 {abc}",
        ],
        lock: [
          "Q W E R T Y U I O P",
          "{big} A S D F G H J K L",
          "{123} Z X C V B N M {bksp}",
        ]
      }
    }),
    created() {
      if(this.type == 'zhang') {
        this.layout = {
          default: [
            "q w e r t y u i o p",
            "{lock} a s d f g h j k l",
            "{123} z x c v b n m {bksp}",
          ],
          123: [
            "1 2 3 {bksp}",
            "4 5 6 0",
            "7 8 9 {abc}",
          ],
          lock: [
            "Q W E R T Y U I O P",
            "{big} A S D F G H J K L",
            "{123} Z X C V B N M {bksp}",
          ]
        }
        
      } else {
        this.layout = {
          default: [
            "1 2 3 {bksp}",
            "4 5 6 0",
            "7 8 9 {abc}",
          ],
          abc: [
            "q w e r t y u i o p",
            "{lock} a s d f g h j k l",
            "{123} z x c v b n m {bksp}",
          ],
          lock: [
            "Q W E R T Y U I O P",
            "{big} A S D F G H J K L",
            "{123} Z X C V B N M {bksp}",
          ]
        }
      }
    },
    mounted() {
      this.keyboard = new Keyboard(this.keyboardClass, {
        onChange: this.onChange,
        onKeyPress: this.onKeyPress,
      });
      this.keyboard.setOptions({
        layoutName: "default",
        layout: this.layout,
        display: {
          "{enter}": "close",
          "{123}": "123",
          "{bksp}": "<img src='自行配置图片' style='margin-top: 9px;' width='20'>",
          "{tab}": "tab",
          "{space}": "space",
          "{lock}": "<img src='自行配置图片' style='margin-top: 5px;' width='20'>",
          "{abc}": "abc",
          "{big}": "<img src='自行配置图片' style='margin-top: 5px;' width='20'>",
        },
      });
    },
    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 === "{123}" || button === "{abc}") {
          this.handleShift();
        }
        if(button === "{lock}" || button === "{big}") this.hadleLock();
      },
      handleShift() {
        let currentLayout = this.keyboard.options.layoutName;
        let shiftToggle;
        if(this.type == 'zhang') {
          shiftToggle = currentLayout === "default" ? "123" : "default";
        } else {
          shiftToggle = currentLayout === "default" ? "abc" : "default";
        }
        this.keyboard.setOptions({
          layoutName: shiftToggle,
        });
      },
      hadleLock(e) {
        let currentLayout = this.keyboard.options.layoutName;
        let shiftToggle;
        if(this.type == 'zhang') {
          shiftToggle = currentLayout === "default" ? "lock" : "default";
        } else {
          shiftToggle = currentLayout === "abc" ? "lock" : "abc";
        }
        this.keyboard.setOptions({
          layoutName: shiftToggle,
        });
      },
      resetInput(text) {
        this.keyboard.setInput(text);
      },
    },
    
    // watch: {
    //   input(input) {
    //     console.log(input, '更改了')
    //     this.keyboard.setInput(input);
    //   },
    // },
  };
</script>
  
<style lang="scss" scoped>
  .simple-keyboard {
    background: none !important;
    font-size: 20px;
  }

  ::v-deep(.hg-button:nth-of-type(4)) {
    box-sizing: border-box;
    width: 20px;
  }
</style>
  

3.引用封装的SimpleKeyboard.vue组件

在需要使用虚拟键盘的页面引用

<template>
    <div class="content">
        <simple-keyboard ref="accountKeyWord" @onChange="onChange" />
    </div>
</template>
<script>
    import SimpleKeyboard from '@/components/SimpleKeyboard';
    export default {
        components: {
            SimpleKeyboard
        },
        methods: {
            onChange(e) {
                console.log(e);
            },
        }
    }
</script>
<style lang="scss" scoped>
    .content {
        width: 100%;
        height: 100%;
    }
</style>

其中onchange事件是当SimpleKeyboard出现更改时触发的事件。

4.成品图

这里我没有做中文键盘,如果还需要中文键盘,还需要小伙伴自行下载中文键盘的组件,以及更改一些配置。