超丝滑 Vue 虚拟键盘组件Vue-SimpleKeyboard

今天给小伙伴们推荐一款超酷的 Vue 模拟键盘组件VueSimpleKeyboard。

vue-simple-keyboard 一个可定制 自适应 轻量级的虚拟键盘vue.js组件。支持自定义主题，手机端和IOS风格、数字键盘等功能。

特性

• 支持vue不需要额外的插件
• 可定制性选项和方法
• 自适应布局
• 支持自动更正，输入掩码等功能
• 支持多键盘实例
• 提供丰富的演示demos

安装

$ npm i simple-keyboard -S

SimpleKeyboard.vue

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

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

export default {
  props: {
    keyboardClass: {
      default: "simple-keyboard", type: String
    },
    input: {
      type: String
    }
  },
  data: () => ({
    keyboard: null
  }),
  mounted() {
    this.keyboard = new Keyboard({
      onChange: this.onChange,
      onKeyPress: this.onKeyPress
    });
  },
  methods: {
    onChange(input) {
      this.$emit("onChange", input);
    },
    onKeyPress(button) {
      this.$emit("onKeyPress", button);
    }
  },
  watch: {
    input(input) {
      this.keyboard.setInput(input);
    }
  }
};
</script>

使用插件

<template>
  <div>
    <input
      :value="input"
      class="input"
      @input="onInputChange"
      placeholder="Tap on the virtual keyboard to start"
    >
    <vue-simple-keyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input"></vue-simple-keyboard>
  </div>
</template>

<script>
import VueSimpleKeyboard from "./SimpleKeyboard";

export default {
  components: {
    VueSimpleKeyboard
  },
  data: () => ({
    input: ""
  }),
  methods: {
    onChange(input) {
      this.input = input;
    },
    onKeyPress(button) {
      console.log("button", button);
    },
    onInputChange(input) {
      this.input = input.target.value;
    }
  }
};
</script>

提供丰富的演示实例及API文档

附上文档及仓库地址

# 文档地址
https://virtual-keyboard.js.org/vuejs/

# 演示地址
https://hodgef.com/simple-keyboard/demos/

# github地址
https://github.com/simple-keyboard/vue-simple-keyboard

好了，就分享到这里。感谢大家的阅读。如果有什么好的想法欢迎留言讨论哈！