vue-keyboard-virtual-next - npm Package Security Analysis - Socket

Logo

Simple, Fast Key-Board.

keyBoard base on Vue3 , support hand write.

gzip size No dependencies Github Current version Npm Current version

Fully Featured demo (latest)

Other versions

They have the same function as the Vue3 version

Overview

Demo Demo Demo

关于

特性 🎉

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

支持环境

IE / Edge Edge

FirefoxFirefox

ChromeChrome

SafariSafari

OperaOpera

Edge

last 2 versions

last 2 versions

last 2 versions

last 2 versions

安装

使用 npm 或 yarn 安装

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

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

使用

全局引入

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

局部引入

<template> <!-- keyboard 只识别带有 data-mode 标识的输入框 --> <input data-mode value="hello" /> <KeyBoard @change='change'/> </template> <script lang="ts"> import "keyboard-virtual-vue/keyboard.min.css"; import KeyBoard from "keyboard-virtual-vue"; 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属性

参数

说明

默认值

类型

是否必须

版本

v-model

_绑定的输入框value_,可同时双向绑定多个输入框，不传则只与当前focus输入框做数据绑定关系

否

v1.0.4+废弃

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

方法名

说明

类型

版本

reSignUp

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

（）=> void

v1.0.0+

getCurrentInput

获取当前聚焦的输入框

（）=> HTMLInputElement | HTMLTextAreaElement

v1.0.2+

<template> <!-- keyboard 只识别带有 data-mode 标识的输入框 --> <input data-mode :value="你好" /> <KeyBoard ref="keyBoardRef" @change="change"/> </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 keyBoardRef = ref<typeof KeyBoard | null>(null); onMounted(() => { // xxxx逻辑 给键盘重新注册输入框 keyBoardRef.value?.reSignUp(); }) // 第一个参数为当前focus的输入框的value值变化 // 第二个参数为当前foucs的输入框 function change(value, inputEl) { console.log('change value ---->', value) console.log('change input dom ---->', inputEl) } return { change, keyBoardRef }; }, }); </script>

其他说明

  • 有问题欢迎提交 Issue。
  • 本项目为作者一人维护，精力有限，有限解决重大 bug，望理解。
  • 用于生产环境，请使用 release 版本代码
  • 暂只支持vue3版本引入

原网址: 访问
创建于: 2023-08-22 12:14:19
目录: default
标签: 无

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

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