中文键盘 Vue 2 组件库

这是一个 Vue 2 的中文虚拟键盘组件库，支持拼音输入和手写输入。

功能特点

• 即插即用，自动绑定输入框
• 支持拼音输入，带候选词选择功能
• 支持手写输入识别，支持连笔和简写
• 可自定义手写识别算法
• 键盘大小可自定义缩放，灵活适配各种界面布局
• 纯前端实现，可作为静态网页部署，无需服务端支持

安装

npm install @tdh-keyboard/vue2

建议搭配 Vue 2.7 使用。

导出内容

• TdhKeyboard：键盘组件
• setKeyboardConfig / getKeyboardConfig：全局配置
• registerPinyinEngine / registerHandwritingRecognizer：注册拼音引擎和手写识别器
• KeyboardInstance / KeyEvent / KeyBoardMode：常用类型
• 以及 @tdh-keyboard/core 的全部公开导出

Props

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | defaultMode | 'en' \| 'zh' \| 'en_cap' \| 'hand' \| 'num' \| 'num_pure' \| 'id_card' \| 'num_en_cap' \| 'symbol' | 'en' | 默认键盘模式 | | enableHandwriting | boolean | false | 是否启用手写输入 | | position | 'static' \| 'float' \| 'bottom' | 'static' | 键盘定位模式 | | floatMarginTop | number | 0 | 浮动模式下键盘与输入框的距离 | | floatPlacement | 'auto' \| 'top' \| 'right' \| 'bottom' \| 'left' | 'auto' | 浮动模式下的渲染方向 | | disableWhenNoFocus | boolean | true | 没有输入框聚焦时是否禁用键盘 | | manual | boolean | false | 是否启用手动打开模式 | | width | string \| number | - | 键盘宽度，传 number 时按 px 处理 | | height | string \| number | - | 键盘高度，传 number 时按 px 处理 | | numKeys | string[][] | - | 自定义数字键盘布局 |

事件

| 事件名 | 参数类型 | 说明 | | --- | --- | --- | | key | KeyEvent | 当用户在键盘上点击按键时触发 |

基本使用

全局配置

import { setKeyboardConfig } from '@tdh-keyboard/vue2'

setKeyboardConfig({
  defaultMode: 'zh',
  enableHandwriting: true,
  width: 360,
  height: 260,
  floatPlacement: 'auto',
})

基础用法

• 建议在输入框上设置 inputmode="none"，避免移动端弹出系统键盘。
• 可以通过 data-inputmode 指定默认键盘类型，可选值为 'en'、'zh'、'en_cap'、'hand'、'num'、'num_pure'、'id_card'、'num_en_cap'。

<template>
  <div>
    <input
      v-model="inputText"
      data-inputmode="zh"
      inputmode="none"
      placeholder="点击使用键盘输入"
    />
    <TdhKeyboard position="float" :width="360" :height="260" />
  </div>
</template>

<script>
import { TdhKeyboard } from '@tdh-keyboard/vue2'
import '@tdh-keyboard/vue2/style.css'

export default {
  components: {
    TdhKeyboard,
  },
  data() {
    return {
      inputText: '',
    }
  },
}
</script>

手动打开模式

<template>
  <div>
    <input ref="inputRef" inputmode="none" />
    <button @click="openKeyboard">打开键盘</button>
    <button @click="closeKeyboard">关闭键盘</button>
    <button @click="destroyKeyboard">销毁键盘</button>
    <TdhKeyboard ref="keyboardRef" manual position="bottom" />
  </div>
</template>

<script>
import { TdhKeyboard } from '@tdh-keyboard/vue2'

export default {
  components: {
    TdhKeyboard,
  },
  methods: {
    openKeyboard() {
      this.$refs.keyboardRef.open(this.$refs.inputRef)
    },
    closeKeyboard() {
      this.$refs.keyboardRef.close()
    },
    destroyKeyboard() {
      this.$refs.keyboardRef.destroy()
    },
  },
}
</script>

实例方法说明：

• open(target?)：打开键盘，可选传入要写入的 input / textarea
• close()：关闭键盘
• destroy()：销毁当前键盘状态并清空绑定的输入框

如果只需要调整尺寸，推荐直接使用 width / height；原有根节点 style 透传方式仍然可用。

如果只需要调尺寸，推荐直接使用 width / height；原有根节点 style 透传方式仍然可用。

拼音引擎初始化

import { RimePinyinEngine } from '@tdh-keyboard/pinyin'
import { registerPinyinEngine } from '@tdh-keyboard/vue2'

registerPinyinEngine(new RimePinyinEngine({
  wasmDir: '/rime',
}))

RIME 相关文件需要部署到静态资源目录中，文件来源于 @tdh-keyboard/pinyin/data/。

手写识别初始化

import { registerHandwritingRecognizer } from '@tdh-keyboard/vue2'
import { TdhRecognizer } from '@tdh-keyboard/recognizer'

registerHandwritingRecognizer(new TdhRecognizer({
  modelPath: '/models/handwrite/model.json',
  dictPath: '/models/dict.txt',
}))

输入模式

• zh：拼音输入模式
• en：英文输入模式
• en_cap：大写英文输入模式
• hand：手写输入模式
• num：数字输入模式，会复用通用工具栏，默认提供换行、清空和收起，不显示手写切换按钮
• num_pure：纯数字输入模式，仅支持 0-9，会复用通用工具栏，默认提供换行、清空和收起，不显示手写切换按钮
• id_card：身份证输入模式，支持 0-9 和 X，会复用通用工具栏，默认提供换行、清空和收起，不显示手写切换按钮
• num_en_cap：固定数字字母大写输入模式，仅支持 0-9 和 A-Z，会复用通用工具栏，默认提供换行、清空和收起，不显示手写切换按钮
• symbol：符号输入模式

工具栏行为

• 当候选词栏未显示时，拼音、英文、手写和各类数字键盘都会使用统一工具栏。
• 清空输入 会先在按钮左侧弹出确认浮层，点击确认后才会真正清空内容。
• 工具栏分割线只会在左右两侧都有可见一级动作时显示。