https://github.com/cangshudada/vue-keyboard-next
keyBoard base on Vue3 , support hand write✒
https://github.com/cangshudada/vue-keyboard-next
handwriting keyboard typescript vue3
Last synced: about 1 month ago
JSON representation
keyBoard base on Vue3 , support hand write✒
- Host: GitHub
- URL: https://github.com/cangshudada/vue-keyboard-next
- Owner: cangshudada
- License: mit
- Created: 2021-01-24T07:58:58.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-25T13:01:35.000Z (about 2 years ago)
- Last Synced: 2025-03-27T20:44:20.751Z (about 2 months ago)
- Topics: handwriting, keyboard, typescript, vue3
- Language: TypeScript
- Homepage: https://www.cmappax.com/keyboard/vue@next
- Size: 444 KB
- Stars: 22
- Watchers: 1
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Simple, Fast Key-Board.
> ### keyBoard base on Vue3 , support hand write.
Fully Featured demo (latest)
> ### Other versions
- For Vue 2.x, Please to using [keyboard-virtual-vue](https://github.com/cangshudada/vue-keyBoard).
- For React, Please to using [virtual-keyboard-react](https://github.com/cangshudada/react-keyBoard).
**They have the same function as the Vue3 version**
## Overview
## 关于
### 特性 🎉
- 支持多达五种键盘模式
- 支持自定义主题色
- 已集成丰富的中文字库
- 支持急速识别的手写能力
- vue3.0 组件开箱即用
## 支持环境
| [
](http://godban.github.io/browsers-support-badges/) Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## 安装
### 使用 npm 或 yarn 安装
```bash
$ npm install vue-keyboard-virtual-next --save
```
```bash
$ yarn add vue-keyboard-virtual-next --save
```
如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。
## 使用
### 全局引入
```javascript
import App from "./app.vue";
import { createApp } from "vue";
import "vue-keyboard-virtual-next/keyboard.min.css";
import KeyBoard from "vue-keyboard-virtual-next";
createApp(App)
.use(keyBoard)
.mount("#app");
```
### 局部引入
```vue
import "keyboard-virtual-vue/keyboard.min.css";
import KeyBoard from "keyboard-virtual-vue";
import { defineComponent } from "vue";
export default defineComponent({
components: { KeyBoard },
setup() {
// 第一个参数为当前focus的输入框的value值变化
// 第二个参数为当前foucs的输入框
function change(value, inputEl) {
console.log('change value ---->', value)
console.log('change input dom ---->', inputEl)
}
return {
change
};
},
});
```
### 配置参数
### Input标签属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
| :-----------: | :----------------------------------------------------------- | :----- | :------------------------------------------ | :------------- |
| **data-mode** | 弹出输入法的类型：
`en` 英文小写
`number`数字
`symbol` 标点
`handwrite` 手写
`不传` 默认中文 | String | `en`
`number`
`symbol`
`handwrite` | `default as *` |
| **data-prop** | 注册的输入框的类型 | String | * | |
### Props属性
| 参数 | 说明 | 默认值 | 类型 | 是否必须 | 版本 |
| :---------------: | :----------------------------------------------------------: | :---------------------: | :------: | :------: | :---------: |
| ~~v-model~~ | ~~_绑定的输入框value_,可同时双向绑定多个输入框，不传则只与当前focus输入框做数据绑定关系~~ | | | 否 | v1.0.4+废弃 |
| 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+|
```vue
import "vue-keyboard-virtual-next/keyboard.min.css";
import KeyBoard from "vue-keyboard-virtual-next";
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
components: { KeyBoard },
setup() {
const keyBoardRef = ref<typeof KeyBoard | null>(null);
onMounted(() => {
// xxxx逻辑 给键盘重新注册输入框
keyBoardRef.value?.reSignUp();
})
// 第一个参数为当前focus的输入框的value值变化
// 第二个参数为当前foucs的输入框
function change(value, inputEl) {
console.log('change value ---->', value)
console.log('change input dom ---->', inputEl)
}
return {
change,
keyBoardRef
};
},
});
```
## 其他说明
- **_有问题欢迎提交_ Issue。**
- **_本项目为作者一人维护，精力有限，有限解决重大 bug，望理解。_**
- **用于生产环境，请使用 `release` 版本代码**
- **_暂只支持`vue3`版本引入_**