Simple, Fast Key-Board.
keyBoard base on Vue3 , support hand write.
They have the same function as the Vue3 version
Overview
关于
🎉
特性 - 支持多达五种键盘模式
- 支持自定义主题色
- 已集成丰富的中文字库
- 支持急速识别的手写能力
- vue3.0 组件开箱即用
支持环境
Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
安装
使用 npm 或 yarn 安装
$ npm install cmy-keyboard-next --save
$ yarn add cmy-keyboard-next --save
如果你的网络环境不佳,推荐使用 cnpm。
使用
全局引入
import App from './app.vue'
import { createApp } from 'vue'
import 'cmy-keyboard-next/keyboard.min.css'
import KeyBoard from 'cmy-keyboard-next'
createApp(App)
.use(keyBoard)
.mount('#app')
局部引入
<template>
<!-- keyboard 只识别带有 data-mode 标识的输入框 -->
<input data-mode v-model="value" />
<KeyBoard />
</template>
<script lang="ts">
import 'keyboard-virtual-vue/keyboard.min.css'
import KeyBoard from 'keyboard-virtual-vue'
import { defineComponent, ref } from 'vue'
export default defineComponent({
components: { KeyBoard },
setup() {
const value = ref<string>('你好')
return {
value,
}
},
})
</script>
配置参数
Input 标签属性
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
data-mode | 弹出输入法的类型:en 英文小写number 数字symbol 标点handwrite 手写不传 默认中文 |
String |
en number symbol handwrite
|
default as * |
data-prop | 注册的输入框的类型 | String | * |
Props 属性
参数 | 说明 | 默认值 | 类型 | 是否必须 | 版本 |
---|---|---|---|---|---|
v-model | 绑定的输入框 value,可同时双向绑定多个输入框,不传则只与当前 focus 输入框做数据绑定关系 | string|number | 否 | v1.0.0+ | |
color | 主题色 | #eaa050 |
string | 否 | v1.0.0+ |
modeList | 键盘渲染模式列表,若不传 handApi 则不会出现手写板 | ["handwrite", "symbol"] | string[] | 否 | v1.0.0+ |
blurHide | 是否当前输入框 blur 事件触发隐藏 | true | boolean | 否 | v1.0.0+ |
showHandleBar | 是否显示拖拽句柄 | true | boolean | 否 | v1.0.0+ |
dargHandleText | 拖拽句柄提示文字 | string | 否 | v1.0.0+ | |
modal | 是否显示遮罩层 | false | boolean | 否 | v1.0.0+ |
closeOnClickModal | 是否点击遮罩层隐藏键盘 | true | boolean | 否 | v1.0.0+ |
handApi | 手写识别接口,若不传则无法切换手写模块 | string | 否 | v1.0.0+ | |
animateClass | 键盘显隐动画,内置 slide 动画,如若需要其他动画,可传入相应类名自定义动画 | string | 否 | v1.0.0+ |
Events
参数 | 说明 | 类型 | 版本 |
---|---|---|---|
keyChange | 按键触发事件,第一个参数为当前触发的按键的标识,第二个参数为当前聚焦输入框的props值,若没有则直接返回当前聚焦的input元素(v1.0.1版本之后)
|
(value: string,prop:string|HTMLInputElement) => void | v1.0.0+ |
change | value 改变事件,第一个参数为当前最新通过键盘输入的值,第二个参数为当前聚焦输入框的props值,若没有则直接返回当前聚焦的input元素(v1.0.1版本之后)
|
(value: string,prop:string|HTMLInputElement) => void | v1.0.0+ |
closed | 键盘关闭事件 | () => void | v1.0.0+ |
modalClick | 遮罩点击事件 | () => void | v1.0.0+ |
Component Event
方法名 | 说明 | 类型 | 版本 |
---|---|---|---|
reSignUp | 重新给 input 注册绑定键盘,当页面有新的 input 标签出现时调用此方法 | ()=> void | v1.0.0+ |
getCurrentInput | 获取当前聚焦的输入框 | ()=> HTMLInputElement | HTMLTextAreaElement | v1.0.2+ |
<template>
<!-- keyboard 只识别带有 data-mode 标识的输入框 -->
<input data-mode v-model="value" />
<KeyBoard ref="keyBoardRef" />
</template>
<script lang="ts">
import 'cmy-keyboard-next/keyboard.min.css'
import KeyBoard from 'cmy-keyboard-next'
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
components: { KeyBoard },
setup() {
const value = ref<string>('你好')
const keyBoardRef = ref<typeof KeyBoard | null>(null)
onMounted(() => {
// xxxx逻辑 给键盘重新注册输入框
keyBoardRef.value?.reSignUp()
})
return {
value,
keyBoardRef,
}
},
})
</script>
其他说明
- 有问题欢迎提交 Issue。
- 本项目为作者一人维护,精力有限,有限解决重大 bug,望理解。
- 用于生产环境,请使用
release
版本代码 - 暂只支持
vue3
版本引入