嘎嘎好用的Vue虚拟键盘simple-keyboard

触屏项目中有要手动输入证件号码的需求，自己写的全键盘样式丑了吧唧，我寻思搜搜有没有现成的 还！真！有！ 挺冷门的一个键盘组件
官网
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
    }
  },
  data: () => ({
    keyboard: null,    
  }),
  mounted() {
    this.keyboard = new Keyboard(this.keyboardClass, {
      onChange: this.onChange,
      onKeyPress: this.onKeyPress
    });
    this.setKeyboard()    
  },
  methods: {
    onChange(input) {
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
      this.$emit("onKeyPress", button);
    },
    setKeyboard() {
      this.keyboard.setOptions({
      layoutName: "default",
      theme: "hg-theme-default hg-layout-default myTheme",
      layout: {
      default: [
        "1 2 3 4 5 6 7 8 9 0",
        "Q W E R T Y U I O P",
        'A S D F G H J K L',
        "{bksp} Z X C V B N M {enter}",
      ]},
      buttonTheme: [
        {
          class: "bksp",
          buttons: "{bksp}"
        },
        {
          class: "enter",
          buttons: "{enter}"
        }
      ],
      display: {
        '{bksp}': "删除",
        '{enter}': "确认"
      }
    });
    }
  },
  watch: {
    input(input) {
      this.keyboard.setInput(input);
      
    }
  }
};
</script>

样式

文档是英文的 我连翻译带猜的改了排版和样式 整了点立体按钮效果

3. 在需要应用的页面 引入 注册 使用即可

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

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

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