Input-Everywhere

Github 地址

https://github.com/callmexhj/input-everywhere

NPM包线上地址

https://www.npmjs.com/package/input-everywhere

快速上手

安装

npm

npm i input-everywhere

yarn

yarn add input-everywhere

引入组件

import {InputEverywhere} from 'input-everywhere'
import 'input-everywhere/style'
// 低版本node环境下：import 'input-everywhere/dist/style.css'

示例

import {InputEverywhere} from 'input-everywhere'
import 'input-everywhere/style'
// 低版本node环境下：import 'input-everywhere/dist/style.css'

const App = () => {
  return <InputEverywhere />
}

export default App

虚拟键盘组件参数说明

| 属性 | 说明 |类型|默认值| | ---- | ---- |---|---| | buttonText | 键盘右下角操作按钮的文本（仅当showButton为true时生效） |string|确认| | checkModeTo | mode为numAlphabet和alphabet时，指定左下角键盘切换按钮的切换目标类型 |number/symbolNum|symbolNum| |className, |传入组件的样式类|string|-| |cursorConfig|光标配置项|CursorConfig|| | defaultValue | 输入默认值 |string|-| | disabled | 是否禁用键盘 |boolean|false| |disOrder|是否乱序显示数字键盘（仅当mode为number时生效）|boolean|false| |focus|默认的聚焦状态|boolean|false| |hideAfterSubmit|提交后是否收起键盘|boolean|true| | keyboardMode | 设置键盘模式 |number/alphabet/numAlphabet/symbolNum/licensePlate/verificationCode|number| | keyBoardTitle | 键盘顶部标题的文本（仅当showHide为true时生效） |string|传化安全键盘| | licenseType | 车牌类型(绿牌8位，常规车牌7位) |green/default|default| | password | 是否使用密码模式（当mode为licensePlate时不生效） |boolean|false| |regular|传入一个正则表达式，在regularPlace指定的时机触发校验|object|null| |regularPlace|指定正则校验的时机|['blur', 'submit']/['blur']/['submit']|[]| | size | 设置输入框大小 |big/default/small|'big'| | showButton | 是否右下角的操作按钮（点击时触发onSubmit事件） |boolean|true| | showClear | 是否支持一键清除输入内容（仅当mode为number/alphabet/numAlphabet/symbolNum时生效） |booleam|true| |showHide |设置是否展示键盘顶部的标题和缩小键盘按键|boolean|true| |style|传入组件的样式|object|-| | theme | 键盘主题 |string|#1677FF| |verificationCodeConfig|验证码模式配置项（仅在mode为verificationCode时生效）|VerificationCodeConfig|| | onBlur | 输入框失焦事件 |( ) => void|-| | onChange | 输入时的回调 |( ) => void|-| | onFocus | 输入框聚焦事件 |( ) => void|-| | onSubmit | 提交事件 |(value: string) => void|-| | onRegular | 正则校验结果（需要首先传入正则表达式regular） |(boolean: boolean) => void|-|

CursorConfig

| 属性 | 说明 |类型|默认值| | ---- | ---- |---|---| | show | 控制是否展示光标 |boolean|true| | blink | 控制光标是否闪动 |boolean|true|

VerificationCodeConfig

| 属性 | 说明 |类型|默认值| | ---- | ---- |---|---| | mode | 控制验证码模式下支持的键盘类型 |['number']/['alphabet']/ ['number','alphabet']|['number','alphabet']| | length | 控制验证码输入框的长度 |number|6| | onlyCapitalized | 控制字母键盘仅支持输入大写（仅当mode中包含alphabet时生效） |number|6| | autocommit | 当输入的位数超过最大长度时候，自动触发onSubmit事件 |boolean|false| | autoclose | 当autocommit时，收起键盘 |boolean|true|

发布组件

修改package.json

"version": "1.1.1",//修改版本号，需要与上一版本不同

发布npm

nrm use npm //可选，切换到npm源
npm login //可选，登录到npm
npm publish