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

触屏项目中有要手动输入证件号码的需求，自己写的全键盘样式丑了吧唧，我寻思搜搜有没有现成的还！真！有！挺冷门的一个键盘组件
官网
https://virtual-keyboard.js.org/vuejs

示例

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

文档
https://hodgef.com/simple-keyboard/getting-started/

黑的、白的、移动端、全键盘、数字键盘、各种看不懂的文字啥样的都有

代码示例也很全面可以说是十分贴心了

实际应用

先安装

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

样式

<style>.simple-keyboard {max-width: 850px;padding: 15px;margin: 0 auto;margin-top: 380px;box-shadow: 0 4px 0 #b2b2b2, 0 7px 16px rgba(0,0,0,.6);}.hg-theme-default .hg-button.hg-standardBtn{height: 50px;margin: 8px 10px;font-size: 23px;background-color: #fff;border-radius: 8px;cursor: pointer;-webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);}.hg-theme-default .hg-button.hg-standardBtn:active {box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);background-color: #efefef;}.simple-keyboard.hg-layout-default .hg-button.bksp {height: 50px;margin: 8px 10px;font-size: 23px;background-color: #fff;border-radius: 8px;cursor: pointer;-webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);background: #a8001e;color: white;}.simple-keyboard.hg-layout-default .hg-button.bksp:active {box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);background-color: #efefef;color: #000000;}.simple-keyboard.hg-layout-default .hg-button.enter {height: 50px;margin: 8px 10px;font-size: 23px;background-color: #fff;border-radius: 8px;cursor: pointer;-webkit-box-shadow: 0 4px 0 #b2b2b2, 0 5px 10px rgba(0,0,0,.7);box-shadow: 0 3px 0 #b2b2b2, 0 4px 6px rgba(0,0,0,.7);background: #a8001e;color: white;}.simple-keyboard.hg-layout-default .hg-button.enter:active {box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);background-color: #efefef;color: #000000;}
</style>

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

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

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

     onChange(input) {// input 是当前点击按钮的值},onKeyPress(button) {if (button == "{enter}") {// 如果按确认键的相应操作}if (button == "{bksp}") {// 删除键的相应操作}},

嘎嘎好用的Vue虚拟键盘simple-keyboard相关推荐

html桌面插件,js桌面虚拟键盘插件A-Keyboard
A-Keyboard是一款js虚拟键盘插件.该插件可以在桌面端模拟普通键盘,移动端键盘和数字键盘.并且内置了几种可选用的主题效果. 使用方法内置主题的CSS文件. 初始化插件通过模块化的方式来使用 ...
Windows Store apps开发[72]Windows 8 开发31日-第15日-虚拟键盘
注:本文由BeyondVincent(破船)翻译首发转载请注明出处:BeyondVincent(破船)@DevDiv.com 第15日-虚拟键盘 : 今天,我将介绍Windows 8中的虚拟 ...
vue 管理后台使用虚拟键盘组件支持中英文切换
前言:在大型触屏设备(如双屏设备)中,就没有键盘去操作,而且在触屏input或者textarea的输入时候就无法去输入值,没办法触发输入框enter事件,所以就需要去建立一个虚拟键盘去操作就想着找一 ...
Vue使用虚拟键盘+中英文切换
1.安装依赖 npm install simple-keyboard --save npm install simple-keyboard-layouts --save 2.虚拟键盘组件 simple ...
【土旦】vue 解决ios H5底部输入框获取焦点时弹出虚拟键盘挡住输入框以及监听键盘收起事件...
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图解决方法: html: <input type=&quo ...
一个VueJS虚拟键盘组件
这个虚拟键盘就是这样的:详细属性在这里 https://javascript.ctolib.com/vue-touch-keyboard.html 我今天要说的就是不用vue-cli脚手架怎么来使用这 ...
iOS 上常用的两个功能：点击屏幕和return退出隐藏键盘和解决虚拟键盘
原文地址:http://blog.csdn.net/xiaotanyu13/article/details/7711954 iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击 ...
如何使用 OpenCV 开发虚拟键盘
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达介绍 OpenCV 是最流行的计算机视觉任务库,它是用于机器学习. ...
手机虚拟摄像头_没键盘也能打字？三星展示最新虚拟键盘Selfie Type：是真的
1月8日消息,三星在近日举行的2020 CES国际消费电子展上展示了虚拟键盘Selfie Type,它是一款全新的概念产品,由三星内部的创意实验室C-Lab研发,能够通过手机的前置摄像头来智能识别用户 ...

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

嘎嘎好用的Vue虚拟键盘simple-keyboard相关推荐

最新文章

热门文章