password-box

• 作者：zhaojianling
• 邮箱："[email protected]"
• 版本：0.2.6

介绍

密码框

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-password-box --save

• 如果你还没有安装 npm，可通过以下方式进行 安装。
• 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

• 待开发

使用

最少配置参数为：

• 使用自定义键盘

<PasswordBox
    keyboardType={ 'custorm' }
    password={ this.state.password1 }
/>

• 使用原生键盘

<PasswordBox
    keyboardType={ 'native' }
    password={ this.state.password2 }
    onChange={ this.getInputVal }
/>

需要让input失去焦点时，需要给组件添加ref例如 ref={(dom) => this.passwordboxIns = dom } 然后调用this.passwordboxIns.refs.nativeKeyBoard.onhandleBlur()

配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | keyboardType | string | custorm | 键盘类型（native、custorm） | | password| string | | 密码 | | passwordLen| number | 6 | 密码长度 | | inputType| string | number | input type(keyboardType 为native时有效) | | isEncrypt| bool | true | 是否加密 | | hasAnimation| bool | false | 是否有动画 | | animationDuration| number | 300 | 完成动画所花费的时间，以毫秒计 | | className| string | | 类名 | | onChange| function | () => {} | 回调函数（keyboardType为native时用于父组件获取键盘输入值） | | onClick| function | () => {} | 点击事件 | | hasError| bool | false | 输入是否有错 | | hasEyeButton| bool | false | 是否显示眼睛按钮 | | eyeButtonClassName| object | | 眼睛按钮样式设置{openEyeClass: '',closeEyeClass: ''} | | eyePos| string | right | 眼睛位置(right, bottom) | | styleType| string | box | 密码框的展示类型(box, underline) | | classConfig| object | | 样式配置{usualClass: '', errorClass: ''} | | contentType| string | circle | 加密样式(circle， star) |

注意事项

• 组件注意事项

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

相关资料

• lm 组件开发规范

Changelog

0.1.0

1. init

0.2.2

1. 添加横线展示
2. 添加小眼睛设置（加密|不加密）
3. 加密时展示为*

0.2.6

1. 升级react版本，改写成hook

TODO: ts