当前位置: 首页 > news >正文

嘎嘎好用的虚拟键盘第二弹之中文输入法

之前还在为不用研究输入中文而暗自窃喜 这不新需求就来了(新需求不会迟到 它只是在路上飞一会儿)
找到了个博主分享的代码 是好使的 @前端-xyq 已经和原作者申请转载了 感谢~~

原作者地址:https://www.cnblogs.com/linjiangxian/p/16223681.html

抄的过程中发现 诶? 这不我之前用的那个虚拟键盘组件吗 这货还带中文呢
是的 他带 上一篇还有人问我能不能中文输入 我之前瞪两眼珠子 活拉就是没看见

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
原作者的方法就是能实现的 套了两层组件keyboard-input 和 simpleKeyboard
两个utils的js方法 core.js隐藏键盘 和 mixins.js 表单字段校验(这里用element-ui el-form的prop validate校验也行)

用的过程中发现有两个报错
1.点击关闭if (button == ‘{close}’) 会报

在这里插入图片描述
if里改成如下代码即可

	if (button == '{close}') {let arr = document.querySelectorAll('.hg-theme-default');arr.forEach((ele) => {ele.style.visibility = 'hidden';});return false;}

2.中英文切换时会报错
在这里插入图片描述
改成如下代码即可

        if (this.keyboard.options.layoutCandidates !== null) {this.displayDefault = {'{bksp}': 'backspace','{lock}': 'caps','{tab}': 'tab','{shift}': 'shift','{change}': '中文','{space}': ' ','{clear}': '清空','{close}': '关闭',},this.keyboard.setOptions({layoutCandidates: null,display: this.displayDefault,});} else {this.displayDefault = {'{bksp}': 'backspace','{lock}': 'caps','{tab}': 'tab','{shift}': 'shift','{change}': '英文','{space}': ' ','{clear}': '清空','{close}': '关闭',},this.keyboard.setOptions({layoutCandidates: layout.layoutCandidates,display: this.displayDefault,});}

我这里修改了simpleKeyboard内的部分代码 做了点样式调整

<template><div :class="keyboardClass"></div>
</template><script>
import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css';
import layout from 'simple-keyboard-layouts/build/layouts/chinese'; // 中文输入法export default {name: 'SimpleKeyboard',props: {keyboardClass: {default: 'simple-keyboard',type: String,},input: {type: String,default: '',},},data: () => ({keyboard: null,}),mounted() {this.keyboard = new Keyboard(this.keyboardClass, {onChange: this.onChange,onKeyPress: this.onKeyPress,...layout});this.setKeyboard()},methods: {setKeyboard() {this.keyboard.setOptions({layoutName: "shift",layoutCandidatesPageSize: 10,theme: "hg-theme-default hg-layout-default myTheme",layout: {// 默认布局default: ['` 1 2 3 4 5 6 7 8 9 0 - = {bksp}','{tab} q w e r t y u i o p [ ] \\',"{lock} a s d f g h j k l ; '",'{shift} z x c v b n m , . / {clear}','{change} {space} {close}',],// 切换shift布局shift: ['~ ! @ # $ % ^ & * ( ) _ + {bksp}','{tab} Q W E R T Y U I O P { } |','{lock} A S D F G H J K L : "','{shift} Z X C V B N M < > ? {clear}','{change} {space} {close}',],},buttonTheme: [{class: 'hg-red close',buttons: '{close}',},{class: 'hg-red change',buttons: '{change}',},],display: {'{bksp}': 'backspace','{lock}': 'caps','{tab}': 'tab','{shift}': 'shift','{change}': '英文','{space}': ' ','{clear}': '清空','{close}': '关闭',}});},onChange(input) {this.$emit('onChange', input);},// 点击键盘onKeyPress(button, $event) {console.log("onKeyPress -> $event", $event)if (button == '{close}') {let arr = document.querySelectorAll('.hg-theme-default');arr.forEach((ele) => {ele.style.visibility = 'hidden';});return false;} else if (button == '{change}') { // 切换中英输入法        if (this.keyboard.options.layoutCandidates !== null) {this.displayDefault = {'{bksp}': 'backspace','{lock}': 'caps','{tab}': 'tab','{shift}': 'shift','{change}': '中文','{space}': ' ','{clear}': '清空','{close}': '关闭',},this.keyboard.setOptions({layoutCandidates: null,display: this.displayDefault,});} else {this.displayDefault = {'{bksp}': 'backspace','{lock}': 'caps','{tab}': 'tab','{shift}': 'shift','{change}': '英文','{space}': ' ','{clear}': '清空','{close}': '关闭',},this.keyboard.setOptions({layoutCandidates: layout.layoutCandidates,display: this.displayDefault,});}} else if (button == '{clear}') {this.keyboard.clearInput();} else {let value = $event.target.offsetParent.parentElement.children[0].children[0].value;if (value) {this.keyboard.setInput(value);}        }this.$emit('onKeyPress', button);/*** If you want to handle the shift and caps lock buttons*/if (button === '{shift}' || button === '{lock}') this.handleShift();},handleShift() {let currentLayout = this.keyboard.options.layoutName;let shiftToggle = currentLayout === "default" ? "shift" : "default";this.keyboard.setOptions({layoutName: shiftToggle});} },watch: {input(input) {this.keyboard.setInput(input);},},
};
</script><style scoped>.hg-theme-default {width: 80%;padding: 15px;box-shadow: 0 4px 0 #b2b2b2, 0 7px 16px rgba(0,0,0,.3);}.hg-theme-default /deep/ .hg-button {height: 50px;    }.hg-theme-default /deep/ .hg-red {background: #a8001e!important;color: white;}.hg-theme-default /deep/ .hg-red {max-width: 200px;}.hg-theme-default /deep/ .close {max-width: 200px;}.hg-theme-default /deep/ .change {max-width: 200px;}.hg-theme-default /deep/ .hg-button{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 /deep/ .hg-button:active {box-shadow: 0 4px 0 #717070, 0 5px 3px rgba(0,0,0,.9);background-color: #efefef;}.hg-theme-default /deep/ .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;}.hg-theme-default /deep/ .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;}.hg-theme-default /deep/ .hg-layout-default .hg-button.enter {height: 50px;margin: 5px 8px;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;}.hg-theme-default /deep/ .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>

外层组件keyboard-input的css样式

<style scoped>.input-keyboard /deep/ .hg-theme-default {position: fixed;left: 50%;bottom: 230px;transform: translate(-50%);visibility: hidden;margin-top: 20px;z-index: 2000; }.input-keyboard /deep/ .hg-candidate-box {position: static;transform: translateY(0);border-bottom: none;border-radius: none;}.input-keyboard /deep/.hg-rows {font-size: 25px;}.input-keyboard /deep/ .hg-candidate-box {font-size: 23px;} .input-keyboard /deep/ li.hg-candidate-box-list-item {   height: 60px;width: 40px;padding: 0 6px;}
</style><style scoped>.input-keyboard /deep/ .el-input__inner {color: #000;border-color: #adadad;height: 45px;}.input-keyboard /deep/ .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {border-color: #a8001c;}.input-keyboard /deep/ .el-form-item__error {color: #a8001c;font-size: 17px;line-height: 1;padding-top: 2px;position: absolute;top: 100%;left: 0;}.input-keyboard /deep/ .el-form-item {margin-bottom: 50px;}.input-keyboard /deep/ .el-form-item__label {font-size: 25px;color: #000000;}.input-keyboard /deep/ .el-input.is-disabled .el-input__inner {font-size: 25px;height: 45px;background-color: #fff;border-color: #adadad;color: #000;cursor: not-allowed;}.input-keyboard /deep/ .el-textarea__inner {   font-size: 25px;color: #000000;   }.input-keyboard /deep/ .el-textarea.is-disabled .el-textarea__inner {font-size: 25px;height: 45px;background-color: #fff;border-color: #adadad;color: #000;cursor: not-allowed;font-family: Avenir,Helvetica,Arial,sans-serif;}.input-keyboard /deep/ .el-input.is-active .el-input__inner, .el-input__inner:focus {border-color: #a8001e;outline: 0;}.input-keyboard /deep/ .el-input.is-disabled .el-input__wrapper {background-color: #ffffff;} .input-keyboard /deep/ .el-form-item.is-error .el-select-v2__wrapper, .el-form-item.is-error .el-select-v2__wrapper:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus {box-shadow: 0 0 0 1px #a8001e inset;}
</style>

再次感谢作者@前端-xyq

相关文章:

嘎嘎好用的虚拟键盘第二弹之中文输入法

之前还在为不用研究输入中文而暗自窃喜 这不新需求就来了&#xff08;新需求不会迟到 它只是在路上飞一会儿&#xff09; 找到了个博主分享的代码 是好使的 前端-xyq 已经和原作者申请转载了 感谢~~ 原作者地址&#xff1a;https://www.cnblogs.com/linjiangxian/p/16223681.h…...

vue3使用el-autocomplete请求远程数据

服务器端 RestController RequestMapping("/teacher") public class TeacherController {Resourceprivate TeacherService teacherService;GetMapping({"/v1/getTop10TeacherByName/","/v1/getTop10TeacherByName/{name}"})public ResultBean&l…...

【学习笔记】HarmonyOS 4.0 鸿蒙Next 应用开发--安装开发环境

开发前的准备 首先先到官网去下载Devco Studio 这个开发工具&#xff0c;https://developer.harmonyos.com/cn/develop/deveco-studio/#download 提供了WIndows和Mac的开发环境&#xff0c;我自己是Windows的开发环境。 所以下载之后直接点击exe进行安装即可。 如果之前安装过…...

【PHP】计算两个时间戳之间相差的时间

目录 一、span方法概述 二、输出格式解析 三、方法执行流程 四、应用场景 五、注意事项 六、完整代码示例 时间跨度计算&#xff1a;PHP中的span方法解析 在Web开发中&#xff0c;我们经常需要对时间进行各种计算&#xff0c;尤其是在用户界面中展示时间差或倒计时等功能…...

Out-of-Distribution Detection with Semantic Mismatch under Masking

Out-of-Distribution Detection with Semantic Mismatch under Masking 摘要引言2 相关工作2.1 现有的OOD检测方法2.2基于重构的面向对象检测2.3利用外部OOD数据进行OOD检测2.4 开放集合识别Mismatch under Masking) 摘要 本文提出了一种名为MoodCat的新型分布之外(OOD)检测…...

嫦娥六号近月制动成功,建立月球基地又迈进一步!

嫦娥六号探测器在近月制动的关键时刻&#xff0c;北京航天飞行控制中心内弥漫着紧张而庄重的氛围。每一个航天科技工作者都屏息以待&#xff0c;他们的眼神中充满了期待与自豪。随着一系列精妙绝伦的指令如同琴弦上的音符般流畅地奏响&#xff0c;嫦娥六号探测器在万众瞩目的目…...

上位机图像处理和嵌入式模块部署(树莓派4b使用lua)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 lua是一个脚本语言&#xff0c;比c语言开发容易&#xff0c;也没有python那么重&#xff0c;整体使用还是非常方便的。一般当成胶水语言进行开发&a…...

分布式与一致性协议之ZAB协议(五)

ZAB协议 ZAB集群如何从故障中恢复 如果我们想把ZAB集群恢复到正常状态&#xff0c;那么新领导者就必须确立自己的领导关系&#xff0c;成为唯一有效的领导者&#xff0c;然后作为主节点"领导"各备份节点一起处理读写请求 如何确立领导关系 前面提到&#xff0c;选…...

计算机毕业设计 | springboot+vue凌云在线阅读平台 线上读书系统(附源码)

1&#xff0c;绪论 随着社会和网络技术的发展&#xff0c;网络小说成为人们茶钱饭后的休闲方式&#xff0c;但是现在很多网络小说的网站都是收费的&#xff0c;高额的收费制度是很多人接受不了的&#xff0c;另外就是很多小说网站都会有大量的弹窗和广告&#xff0c;这极大的影…...

ICode国际青少年编程竞赛- Python-1级训练场-综合训练1

ICode国际青少年编程竞赛- Python-1级训练场-综合训练1 1、 Spaceship.turnLeft() for i in range(2):Spaceship.turnLeft()Spaceship.step(3) Dev.step(-1) Spaceship.step(4) Spaceship.turnLeft() Spaceship.step(3)2、 Spaceship.step() Spaceship.turnLeft() Spaceship.…...

提示词工程入门-使用文心一言4.0-通义千问-GPT4-Claude3通用提示技巧测试

提示词工程基础&#x1f680; 在了解完了大语模型的基本知识&#xff0c;例如API的使用多轮对话&#xff0c;流式输出&#xff0c;微调&#xff0c;知识向量库等知识之后&#xff0c;接下来需要进一步补足的一个大块就是提示词工程&#xff0c;学习和了解提示词工程除了基本的提…...

损失函数详解

1.损失函数 是一种衡量模型与数据吻合程度的算法。损失函数测量实际测量值和预测值之间差距的一种方式。损失函数的值越高预测就越错误&#xff0c;损失函数值越低则预测越接近真实值。对每个单独的观测(数据点)计算损失函数。将所有损失函数&#xff08;loss function&#xf…...

算法提高之树的中心

算法提高之树的中心 核心思想&#xff1a;树形dp 换根dp 每个点作为根节点 找其子树的最大距离和父节点的最大距离 dfs1&#xff1a;求子树对于当前根节点的最大距离和次大距离 求次大距离原因&#xff1a;如果当前节点是其父节点子树的最大路径上的点&#xff0c;最大距离不…...

【Java基础】面向对象是什么

面向对象和面向过程的对比 类和对象 class Car{} 是描述对象&#xff08;车&#xff09;的类&#xff0c;属于引用数据类型用来描述对象具有的属性(变量)和行为(函数)&#xff0c;属于概念模型 Car baomanew Car(); 对象需要由类来创建对象具备了类中定义的属性和行为 对象…...

家用洗地机应该怎么选?哪个牌子好?市场上主流洗地机品牌推荐

洗地机的出现&#xff0c;让越来越多的家庭享受清洁的过程&#xff0c;给人们腾出来更多的时间陪伴家人和休息。但是在选购一台洗地机前&#xff0c;大家多多少少肯定有些疑问&#xff0c;洗地机到底实不实用&#xff1f;好不好用&#xff1f;能扫干净吗&#xff1f;还有哪些好…...

python Django REST framework允许你根据API的版本提供不同的行为或数据

在Django REST framework中,版本控制是一个重要的功能,它允许你根据API的版本提供不同的行为或数据。以下是如何在Django REST framework中设置API版本控制的几种方法: 1. 使用URL路径参数 你可以通过URL路径中的参数来指定API的版本。例如: python复制 # urls.py from …...

unity给物体添加可以包裹所有子物体的BoxCollider

代码如下可直接调用 MeshTool.SpawnCollider(mode);using UnityEngine;public class MeshTool {public static Bounds SpawnCollider(Transform target){Vector3 pMax Vector3.zero;Vector3 pMin Vector3.zero;Vector3 center Vector3.zero;Vector3 oldPos target.transfor…...

2024五一数学建模A题思路代码与论文分析

2024五一数学建模A题完整代码和成品论文获取↓↓↓↓↓ https://www.yuque.com/u42168770/qv6z0d/gyoz9ou5upvkv6nx?singleDoc# 2024五一数学建模A题钢板最优切割路径问题需要建立的模型和算法: 图论 最短路径算法(Dijkstra算法、Floyd算法等) 动态规划 网格化离散建模 …...

ICode国际青少年编程竞赛- Python-1级训练场-基础训练2

ICode国际青少年编程竞赛- Python-1级训练场-基础训练2 1、 a 4 # 变量a存储的数字是4 Dev.step(a) # 因为变量a的值是4&#xff0c;所以Dev.step(a)就相当于Dev.step(4)2、 a 1 # 变量a的值为1 for i in range(4):Dev.step(a)Dev.turnLeft()a a 1 # 变量a的值变为…...

科技控必看!让你轻松成为机器人领域达人

科技控们注意了&#xff01;你是不是经常对机器人技术充满无限的好奇&#xff0c;却又因为缺乏合适的渠道而难以深入了解和亲身体验呢&#xff1f;别担心&#xff0c;BFT机器人&#xff0c;正是你探索机器人世界的绝佳之地&#xff01; 在这里&#xff0c;你将发现一个充满惊喜…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

装饰模式(Decorator Pattern)重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...