一款vue虚拟键盘(支持中文和手写)插件 | houpai

推荐一款vue虚拟键盘(支持中文和手写)插件…

[](#%E5%85%B3%E4%BA%8E "关于")关于

[](#%E7%89%B9%E6%80%A7-%F0%9F%8E%89 "特性 🎉")特性 🎉

  • 支持多达五种键盘模式
  • 支持自定义主题色
  • 已集成丰富的中文字库
  • 支持急速识别的手写能力
  • vue3.0 组件开箱即用

[](#%E6%94%AF%E6%8C%81%E7%8E%AF%E5%A2%83 "支持环境")支持环境

IE / Edge Edge

FirefoxFirefox

ChromeChrome

SafariSafari

OperaOpera

Edge

last 2 versions

last 2 versions

last 2 versions

last 2 versions

[](#%E5%AE%89%E8%A3%85 "安装")安装

[](#%E4%BD%BF%E7%94%A8-npm-%E6%88%96-yarn-%E5%AE%89%E8%A3%85 "使用 npm 或 yarn 安装")使用 npm 或 yarn 安装

COPY`$ npm install vue-keyboard-virtual-next --save
$ yarn add vue-keyboard-virtual-next --save`

如果你的网络环境不佳，推荐使用 cnpm。

[](#%E4%BD%BF%E7%94%A8 "使用")使用

[](#%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A5 "全局引入")全局引入

COPY`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");`

[](#%E5%B1%80%E9%83%A8%E5%BC%95%E5%85%A5 "局部引入")局部引入

COPY`<template>
<!-- keyboard 只识别带有 data-mode 标识的输入框 -->
<input data-mode v-model="value" />
<Key-Board

  :handApi="'https://service.chaunve.com/HandWriteRecognizerService.asmx/Command'" 
  :color="'#06f'"

/>
</template>`

COPY`<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>`

[](#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0 "配置参数")配置参数

[](#Input%E6%A0%87%E7%AD%BE%E5%B1%9E%E6%80%A7 "Input标签属性")Input标签属性

属性

说明

类型

可选值

默认值

data-mode

弹出输入法的类型： en 英文小写 number数字 symbol 标点 handwrite 手写 不传 默认中文

String

en number symbol handwrite

default as *

data-prop

注册的输入框的类型

String

*

[](#Props%E5%B1%9E%E6%80%A7 "Props属性")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 "Events")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 "Component Event")Component Event

方法名

说明

类型

版本

reSignUp

重新给input注册绑定键盘,当页面有新的input标签出现时调用此方法

（）=> void

v1.0.0+

getCurrentInput

获取当前聚焦的输入框

（）=> HTMLInputElement | null

v1.0.1+

COPY`<template>
<!-- keyboard 只识别带有 data-mode 标识的输入框 -->
<input data-mode v-model="value" />
<Key-Board

  :handApi="'https://service.chaunve.com/HandWriteRecognizerService.asmx/Command'" 
  :color="'#06f'"

/>
</template>

<script lang="ts"> 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 value = ref<string>("你好");
const keyBoardRef = ref<typeof KeyBoard | null>(null);
  
onMounted(() => {
    // xxxx逻辑 给键盘重新注册输入框
    keyBoardRef.value?.reSignUp();
})
  
return {
  value,
  keyBoardRef
};

},
}); </script>`

打赏

原网址: 访问%E6%8F%92%E4%BB%B6/)
创建于: 2023-08-21 19:38:13
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论