vue3-keyboard
v2.0.22
Published
<h3 align="center"> Simple, Fast Key-Board. vue3实现的软键盘 </h3>
Downloads
534
Readme
Overview
特性 🎉
- 支持多达五种键盘模式
- 支持自定义主题色
- 已集成丰富的中文字库
- 支持急速识别的手写能力
- vue3.0 组件开箱即用
- 支持全局搜索input并显示在下方
- 支持触发input的v-model和oninput事件
全局引入
import App from "./app.vue";
import { createApp } from "vue";
import "vue3-keyboard/keyboard.min.css";
import KeyBoard from "vue3-keyboard";
createApp(App)
.use(keyBoard)
.mount("#app");
局部引入
<template>
<!-- keyboard 只识别带有 data-mode 标识的输入框 -->
<input data-mode />
<KeyBoard @change='change'/>
</template>
<script lang="ts">
import "vue3-keyboard/keyboard.min.css";
import KeyBoard from "vue3-keyboard";
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
};
},
});
</script>
配置参数
Input标签属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
| :-----------: | :----------------------------------------------------------- | :----- | :------------------------------------------ | :------------- |
| data-mode | 弹出输入法的类型:en
英文小写number
数字symbol
标点handwrite
手写 不传
默认中文 | String | en
number
symbol
handwrite
| default as *
|
| data-prop | 注册的输入框的类型 | String | * | |
Props属性
| 参数 | 说明 | 默认值 | 类型 | 是否必须 | 版本 |
| :---------------: | :----------------------------------------------------------: | :---------------------: | :------: | :------: | :---------: |
| 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
| 方法名 | 说明 | 类型 | 版本 | | --------------- | ------------------------------------------------------------ | ------------------------------- | ------- | | getCurrentInput | 获取当前聚焦的输入框 | ()=> HTMLInputElement | HTMLTextAreaElement |v1.0.2+|