Vue-dusion-keyboard-ry NPM

vue-dusion-keyboard

基于vue.js的一款js键盘，支持拼音输入和手写输入，electron下可离线运行，临时demo地址

安装

npm安装

npm install vue-dusion-keyboard -S

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

全局注册
import VueDusionKeyboard from 'vue-dusion-keyboard'
Vue.use(VueDusionKeyboard)

全局注册手写库地址
Vue.use(VueDusionKeyboard,{handWriteApi:''})

或者按组件注册
import {VueDusionKeyboard,Paint} from 'vue-dusion-keyboard'
Vue.component('VueDusionKeyboard', VueDusionKeyboard)
Vue.component('Paint', Paint) //可省略

标签引入

<!--先引入vue.js-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="./VueDusionKeyboard.umd.min.js"></script>
<script>
new Vue({}).$mount('#app')
</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" observer></vue-dusion-keyboard>

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

加入监听属性observer。

<vue-dusion-keyboard all float observer></vue-dusion-keyboard>

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

window.sign_up_keyboard();

Paint组件

paint组件为vue-dusion-keyboard内置写字板组件

<paint hand-write-api="xxx" @result="result"></paint>

模式

互联网模式

组件上添加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`

组件属性

paint: |属性|说明|类型|可选值|默认值| |:-:|:-|:-|:-|:-| |show_result|是否在右侧显示结果|Boolean|true/false|true| |lib|手写识别库|string|CN/EN|CN| |hand-write-api|手写输入接口地址，不传则为离线electron模式|String|见demo|无 |dll-path|手写库dll路径，默认为plug\\handWrite\\|String|plug\\handWrite\\|无

组件方法

vue-dusion-keyboard: |方法名|说明|参数| |:-:|:-|:-| |sign_up_keyboard|重新注册input显示键盘,当页面有新的input标签出现时调用此方法|event| paint: 无

组件事件

vue-dusion-keyboard: |事件名|说明|参数| |:-:|:-|:-| |keyvalue|键盘输入事件|string| |del|键盘输入事件|(text:被删除的字符,index:被删除字符的位置);| paint: |事件名|说明|参数| |:-:|:-|:-| |result|手写识别结果|string[]|