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

之前还在为不用研究输入中文而暗自窃喜 这不新需求就来了（新需求不会迟到 它只是在路上飞一会儿）
找到了个博主分享的代码 是好使的 @前端-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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/598787.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Amazon Q Business现已正式上市！利用生成式人工智能协助提高员工生产力

Amazon Q Business现已正式上市！利用生成式人工智能协助提高员工生产力

在 2023 年度 AWS re:Invent 大会上&#xff0c;我们预览了 Amazon Q Business&#xff0c;这是一款基于生成式人工智能的助手&#xff0c;可以根据企业系统中的数据和信息回答问题、提供摘要、生成内容额安全地完成任务。 借助 Amazon Q Business&#xff0c;您可以部署安全、…
阅读更多...
Java多线程编程之synchronizaed和锁分类

Java多线程编程之synchronizaed和锁分类

并发编程第三周 1 锁的分类 1.1 可重入锁&#xff0c;不可重入锁 Java提供的synchronized&#xff0c;ReentrantLock,ReentrantReadWriteLock都是可重入锁 可重入&#xff1a;当前线程获取到A锁&#xff0c;在获取之后尝试再次获取A锁是可以直接拿到的。 不可重入:当前线程…
阅读更多...
python使用mongo操作

python使用mongo操作

目前有个需求&#xff0c;就是把所有sql转为mongo管道查询 知识点 在 MongoDB 中&#xff0c;allowDiskUse 选项应该作为聚合命令的一个选项&#xff0c;而不是聚合管道的一个阶段。allowDiskUse 选项用于允许聚合操作使用磁盘空间来临时存储数据&#xff08;当聚合操作的数据…
阅读更多...
[leetcode] 67. 二进制求和

[leetcode] 67. 二进制求和

文章目录 题目描述解题方法模拟java代码复杂度分析 相似题目 题目描述 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 示例 1&#xff1a; 输入:a "11", b "1" 输出&#xff1a;"100"示例 2&#xff1a; 输…
阅读更多...
串的模式匹配之KMP算法实现

串的模式匹配之KMP算法实现

概述 函数刻画 主串位置不变&#xff0c;next值就是模式串(子串)比较后应跳转的位置 不同位置 next[j]函数 next由模式串决定&#xff0c;看模式串当前比较位的前串中前后缀相同的个数来得k-1的值&#xff0c;next[当前位]k1 小补充 PM值&#xff1a;也称部分匹配值&#xf…
阅读更多...
产品推荐 | 基于Intel (Altera) Cyclone V打造的水星Mercury SA1核心板

产品推荐 | 基于Intel (Altera) Cyclone V打造的水星Mercury SA1核心板

01 产品概述 水星Mercury SA1片上系统&#xff08;SoC&#xff09;核心板通过结合基于ARM处理器的SoC FPGA、快速DDR3L SDRAM、eMMC flash、QSPI flash、Gigabit Ethernet PHY和RTC形成了一个高性能嵌入式处理方案&#xff0c;结合了CPU系统的灵活性和FPGA原始的、实时的并行处…
阅读更多...
EXCEL——VLOOKUP函数

EXCEL——VLOOKUP函数

一、VLOOKUP函数的语法 VLOOKUP(lookup_value,table_array,col_index_num,[range_lookup]) lookup_value 需要在数据表首列进行搜索的值&#xff0c;可以是数值&#xff0c;引用或字符串 table_array 要在其中搜索数据的文字、数字或逻辑值表&#xff0c;可以是对区域或…
阅读更多...
自动化测试再升级，大模型与软件测试相结合

自动化测试再升级，大模型与软件测试相结合

近年来&#xff0c;软件行业一直在迅速发展&#xff0c;为了保证软件质量和提高效率&#xff0c;软件测试领域也在不断演进。如今&#xff0c;大模型技术的崛起为软件测试带来了前所未有的智能化浪潮。 软件测试一直是确保软件质量的关键环节&#xff0c;但传统的手动测试方法存…
阅读更多...
阿里巴巴中国站关键字搜索API返回值全攻略：精准定位所需商品

阿里巴巴中国站关键字搜索API返回值全攻略：精准定位所需商品

当使用阿里巴巴中国站的关键字搜索API时&#xff0c;理解其返回值的结构和内容对于精准定位所需商品至关重要。以下是一份全面的攻略&#xff0c;帮助你更好地利用这个API&#xff1a; 在商品列表中&#xff0c;每个商品对象都包含丰富的信息&#xff0c;以帮助你精准定位所需商…
阅读更多...
shell常用文件处理命令

shell常用文件处理命令

1. 解压 1.1 tar 和 gz 文件 如果你有一个 .tar 文件，你可以使用以下命令来解压： tar -xvf your_file.tar在这个命令中，-x 表示解压缩，-v 表示详细输出（可选），-f 后面跟着要解压的文件名。 如果你的 .tar 文件同时被 gzip 压缩了（即 .tar.gz 文件），你可以使用以下…
阅读更多...
PDF文档如何签名？用Adobe信任的文档签名证书

PDF文档如何签名？用Adobe信任的文档签名证书

为PDF文档电子签名的方式有多种多样&#xff0c;但并非所有方案都是可靠的。我们在市面看到的电子图章、电子印章等仅在文档中置入印章图片的方式&#xff0c;并不具有任何法律上的有效性&#xff0c;它只是显示印章的图形效果&#xff0c;随时可以被篡改、伪造。PDF文档如何签…
阅读更多...
煤矿设备故障ar远程诊断系统缩短时间

煤矿设备故障ar远程诊断系统缩短时间

深圳华锐视点&#xff0c;一家专注于AR增强现实技术服务的创新型企业&#xff0c;致力于为电商、金融、快消、文创等众多行业赋予AR超能力。我们坚信&#xff0c;AR技术不仅是现实的延伸&#xff0c;更是未来生活的引领者。 在现实与虚拟交织的AR世界中&#xff0c;我们全面开启…
阅读更多...
安泰ATA-309C：功率放大器的分类及区别是什么

安泰ATA-309C：功率放大器的分类及区别是什么

功率放大器是一种电子器件&#xff0c;用于将低功率信号放大到更高功率&#xff0c;以驱动负载或增强信号强度。功率放大器根据其工作原理、电路拓扑和应用领域的不同&#xff0c;可以分为多种类型。下面将介绍几种常见的功率放大器分类及其区别。 A类功率放大器&#xff1a;A类…
阅读更多...
实战Java虚拟机-基础篇

实战Java虚拟机-基础篇

一、基础篇-Java内存区域 1.运行时数据区 运行时数据区-总览 Java虚拟机在运行Java程序过程中管理的内存区域&#xff0c;称之为运行时数据区。 《Java虚拟机规范》中规定了每一部分的作用。 1.程序计数器 程序计数器&#xff08;Program Counter Register&#xff09;也叫…
阅读更多...
鸿蒙——即将是国内全部物联网的搭载系统

鸿蒙——即将是国内全部物联网的搭载系统

国内物联网时代 中国国内物联网时代是指在中国国内&#xff0c;物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;技术得到广泛应用和发展的时代。在这个时代&#xff0c;各种设备和物品都可以通过互联网进行连接和交互&#xff0c;实现信息的采集、传输和…
阅读更多...
教程分享：如何为跨境电商、外贸、国际展会制作二维码？

教程分享：如何为跨境电商、外贸、国际展会制作二维码？

不论是做跨境电商、在全球做产品推广&#xff0c;还是国外的餐厅运营、参加国际展会&#xff0c;或者是做创意户外广告、制作个性化的个人名片、有趣的产品包装……只要是在国外使用二维码&#xff0c;你都可以在QR Tiger去制作您需要的二维码&#xff01; 一、认识QR Tiger 二…
阅读更多...
读源码系列文章--开源项目openjob之alarm告警模块

读源码系列文章--开源项目openjob之alarm告警模块

一、背景 告警模块&#xff0c;作为大多数应用都存在的一个基础功能&#xff0c;今天我们就以开源项目openjob 为例&#xff0c;分析其设计及实现。 首先&#xff0c;我们梳理一下需求&#xff1a; 支持多种告警方式&#xff0c;包括钉钉、飞书、微信和webhook。方便业务模块…
阅读更多...
C++实现二叉搜索树（模型）

C++实现二叉搜索树（模型）

目录 1.二叉搜索树的概念 2.二叉搜索树的实现 2.1总体代码预览 2.2各个函数实现原理 链表结构体 二叉搜索树的成员变量 二叉搜索树的插入 二叉搜索树的查找 二叉搜索树的遍历 二叉搜索树的删除 1.二叉搜索树的概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#…
阅读更多...
CSS中文本样式（详解网页文本样式）

CSS中文本样式（详解网页文本样式）

目录 一、Text介绍 1.概念 2.特点 3.用法 4.应用 二、Text语法 1.文本格式 2.文本颜色 3.文本的对齐方式 4.文本修饰 5.文本转换 6.文本缩进 7.color&#xff1a;设置文本颜色。 8.font-family&#xff1a;设置字体系列。 9.font-size&#xff1a;设置字体大小。…
阅读更多...
做好源代码防泄密的10条准则

做好源代码防泄密的10条准则

#深度好文计划# 近年来&#xff0c;电脑以及互联网应用在中国的普及和发展&#xff0c;已经深入到社会每个角落&#xff0c; 政府&#xff0c;经济&#xff0c;军事&#xff0c;社会&#xff0c;文化和人们生活等各方面都越来越依赖于电脑和网络。企业需要花费大量的时间精力去…
阅读更多...
最新文章

Copyright @ 2022~2023