之前还在为不用研究输入中文而暗自窃喜 这不新需求就来了（新需求不会迟到 它只是在路上飞一会儿）

找到了个博主分享的代码 是好使的 @前端-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内的部分代码 做了点样式调整

外层组件keyboard-input的css样式

再次感谢作者@前端-xyq