lm-password-box

# password-box * 作者：zhaojianling * 邮箱："zjling1128@gmail.com" * 版本：**`0.2.6`** ## 介绍 _密码框_ --- ## 安装 `lm-*` 组件使用 `npm` 进行管理，命名空间统一为 `lm-`，请使用以下命令进行组件安装。 ``` npm i lm-password-box --save ``` - 如果你还没有安装 `npm`，可通过以下方式进行 [安装](https://nodejs.org/en/download/)。 - 安装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 组件开发规范](http://) --- ## Changelog ### 0.1.0 1. init ### 0.2.2 1. 添加横线展示 2. 添加小眼睛设置（加密|不加密） 3. 加密时展示为* ### 0.2.6 1. 升级react版本，改写成hook TODO: ts ---