前言：
而今同学们对“iosjs键盘”大概比较注重，兄弟们都需要了解一些“iosjs键盘”的相关知识。那么小编在网上收集了一些有关“iosjs键盘””的相关资讯，希望你们能喜欢，姐妹们快快来了解一下吧！今天给小伙伴们推荐一款超酷的 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文档
附上文档及仓库地址
# 文档地址 演示地址 github地址
好了，就分享到这里。感谢大家的阅读。如果有什么好的想法欢迎留言讨论哈！
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #iosjs键盘 #虚拟键盘插件 #虚拟键盘插件怎么安装 #虚拟键盘下载安装 #虚拟键盘插件下载
