lm-password-box

password-box

• 作者：zhaojianling
• 邮箱："[e-mail]"
• 版本：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

---