vue-dusion-keyboard

声明：此项目是踩在巨人肩膀上copy的项目原作者地址为https://github.com/richerdyoung/vue-dusion-keyboard，在此基础上对拼音字典进行了增加

基于vue的一款js键盘，支持拼音输入和手写输入，临时demo地址

安装

npm安装

npm install vue-dusion-keyboard -S

在 main.js 中写入以下内容全局注册：

import VueDusionKeyboard from 'vue-dusion-keyboard'
Vue.use(VueDusionKeyboard)

标签引入

<script src="./vue-dusion-keyboard.js"></script>

使用

在非all模式下，input标签添加属性data-mode，然后在合适位置放置组件<vue-dusion-keyboard></vue-dusion-keyboard>即可。

<input type="text" data-mode="en_cap" />
<vue-dusion-keyboard float></vue-dusion-keyboard>

组件添加all属性即可为所有input标签注册弹出键盘

<vue-dusion-keyboard all float :blurHide="true" hand></vue-dusion-keyboard>

对于js动态生成的输入框，vue-dusion-keyboard提供以下两种方法注册

• 当有新的input标签生成时，重新调用sign_up_keyboard方法注册。

window.sign_up_keyboard();

• (已过时，不建议)调用组件内部显示和隐藏的方法

//添加ref属性 ref="keyboard"
<vue-dusion-keyboard ref="keyboard" all float hand></vue-dusion-keyboard>
//input标签上注册事件
<input type="text" @focus="$refs.keyboard.show_keyboard" @blur="$refs.keyboard.hide_keyboard" />

• (已过时，不建议)将显示和隐藏的方法挂载在window对象上

//组件添加window属性
<vue-dusion-keyboard window all float :blurHide="true" hand></vue-dusion-keyboard>
//input标签上注册事件
<input type="text" onfocus="$show_keyboard(event)" onblur="$hide_keyboard(event)" />

模式

离线模式

组件默认为离线模式，离线模式需要运行在electron环境下，所需的控件有：

nodejs模块:

• ffi
• ref
• iconv

C++库:

• XDLL.dll : 放置在electron根目录的plug\\handWrite\\XDLL.dll下，暂不提供。

手写字库:

• hz.mrd : 中文字库，放置在XDLL.dll同目录下，暂不提供。
• English.mrd : 英文字库，放置在XDLL.dll同目录下，暂不提供。

互联网模式

组件上添加hand-write-api属性即可切换互联网模式，可以直接运行在浏览器中

手写输入互联网接口地址见临时demo地址。注意：临时地址仅供学习之用，随时可能关闭。

Animate.css

此项目引用了animate.css，用于键盘显示隐藏的过渡动画，内置fadeInUp和fadeOutDown，如需其他效果，请引入animate.css文件，然后配置属性enter-active-class和leave-active-class

input标签属性

|属性|说明|类型|可选值|默认值| |:-:|:-|:-|:-|:-| |data-mode|弹出输入法的类型：en_let 英文小写en_cap 英文大写cn 中文hand 手写|String|en_leten_capcnhand|en_let|

组件属性

|属性|说明|类型|可选值|默认值| |:-:|:-|:-|:-|:-| |all|是否为所有input标签注册弹出输入法|Boolean|true/false|false| |float|是否使输入法组件浮动在当前input标签下方|Boolean|true/false|false| |hand|是否启用手写输入，默认禁用|Boolean|true/false|false| |blurHide|当input标签失去焦点时是否隐藏输入组件|Boolean|true/false|true| |size|组件大小，mini最小支持宽度1080px，默认最小宽度则是1330px|String|primary/mini|primary| |enter-active-class|输入组件弹出来的动画效果，基于Animate.css|String|见 Animate.css 官网|fadeInUp| |leave-active-class|输入组件隐藏时的动画效果|String|同上|fadeOutDown| |hand-write-api|手写输入接口地址，不传则为离线electron模式|String|见demo|无 |window|是否将显示和隐藏的方法挂载在window对象上，方法名前面将会加上'$'|Boolean|true/false|false|

组件方法

|方法名|说明|参数| |:-:|:-|:-| |sign_up_keyboard|重新注册input显示键盘,当页面有新的input标签出现时调用此方法|event| |show_keyboard|(已过时，不建议)注册显示键盘事件|event| |hide_keyboard|(已过时，不建议)注册隐藏键盘事件|event|

更新

• v1.0.2 1.添加动态创建的input标签呼出键盘的解决方案
• v1.0.3 1.修复all模式下键盘隐藏事件无效。
• v1.0.4 1.继续修复all模式下键盘隐藏事件无效的问题。
• v1.0.5 1.添加全局方法sign_up_keyboard()，当页面有新的input标签出现时调用此方法即可。 2.添加size属性，最小宽度支持到1080。
• v1.0.6 1.修复离线模式下手写报错的bug 2.修复当input标签或其父元素设置了css属性zoom时，键盘弹出位置不正确的问题
• v1.0.7 1.修改zoom属性检索只检索到上一个 position: relative; 2.为压缩体积，干掉了axios
• v1.0.8 1.修改sign_up_keyboard为异步方法