npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-dusion-keyboard-ry

v3.0.2

Published

基于vue.js的web键盘,支持离线模式。

Downloads

4

Readme

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-classleave-active-class


input标签属性

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

组件属性

vue-dusion-keyboard: |属性|说明|类型|可选值|默认值| |:-:|:-|:-|:-|:-| |all|是否为所有input标签注册弹出输入法|Boolean|true/false|false| |observer|开启后会使用MutationObserver对dom更改进行监听,如果有新的input标签生成即为其注册键盘弹起事件|Boolean|true/false|true| |float|是否使输入法组件浮动在当前input标签下方|Boolean|true/false|true| |blurHide|当input标签失去焦点时是否隐藏输入组件|Boolean|true/false|true| |enter-active-class|输入组件弹出来的动画效果,基于Animate.css|String|见 Animate.css 官网|fadeInUp| |leave-active-class|输入组件隐藏时的动画效果|String|同上|fadeOutDown| |hand-write-api|手写输入接口地址,不传则为离线electron模式|String|见demo|无 |dll-path|手写库dll路径,默认为plug\\handWrite\\|String|plug\\handWrite\\|无 |pun_keys|替换标点符号(16个)|Array|略|无 |num_pun_keys|替换数字键盘左侧标点符号(4个)|Array|略|无 |scope|搜索input的容器|String|略|body |body|浮动相对的顶级容器|String|略|body

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[]|

更新日志

v3.0.0

  • 改为rollup打包
  • 手写去除选择字库,默认中文+英文
  • 改为position: fixed;
  • 改回vue.extend模式
  • 手写请求自动取消上次一没返回结果的请求
  • 增加scope
  • 增加body