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

vue3-keyboard

v2.0.11

Published

<h3 align="center"> Simple, Fast Key-Board. vue3实现的软键盘 </h3>

Downloads

7

Readme

Overview

特性 🎉

  • 支持多达五种键盘模式
  • 支持自定义主题色
  • 已集成丰富的中文字库
  • 支持急速识别的手写能力
  • vue3.0 组件开箱即用
  • 支持全局搜索input并显示在下方
  • 支持触发input的v-model和oninput事件

全局引入

import App from "./app.vue";
import { createApp } from "vue";
import "vue3-keyboard/keyboard.min.css";
import KeyBoard from "vue3-keyboard";

createApp(App)
  .use(keyBoard)
  .mount("#app");

局部引入

<template>
  <!-- keyboard 只识别带有 data-mode 标识的输入框 -->
  <input data-mode />
  <KeyBoard @change='change'/>
</template>

<script lang="ts">
import "vue3-keyboard/keyboard.min.css";
import KeyBoard from "vue3-keyboard";
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 | ennumbersymbolhandwrite | default as * | | data-prop | 注册的输入框的类型 | String | * | |

Props属性

| 参数 | 说明 | 默认值 | 类型 | 是否必须 | 版本 | | :---------------: | :----------------------------------------------------------: | :---------------------: | :------: | :------: | :---------: | | 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

| 方法名 | 说明 | 类型 | 版本 | | --------------- | ------------------------------------------------------------ | ------------------------------- | ------- | | getCurrentInput | 获取当前聚焦的输入框 | ()=> HTMLInputElement | HTMLTextAreaElement |v1.0.2+|