feat: password 支持点击显示原文

This commit is contained in:
wuduoyi 2022-04-12 14:13:56 +08:00
parent d0f7f95541
commit fece5925cc
2 changed files with 28 additions and 2 deletions

View File

@ -420,6 +420,11 @@
@include input-clear();
}
&-passwordReveal {
cursor: pointer;
color: var(--text--muted-color);
}
// 需要能撑开
@include media-breakpoint-up(sm) {
&.#{$ns}Form-control--sizeXs > &-input,

View File

@ -109,6 +109,7 @@ export interface TextProps extends OptionsControlProps {
autoComplete?: any;
allowInputText?: boolean;
spinnerClassName: string;
revealPassword?: boolean;
transform?: {
lowerCase?: boolean; // 用户输入的字符自动转小写
upperCase?: boolean; // 用户输入的字符自动转大写
@ -119,6 +120,7 @@ export interface TextState {
isOpen?: boolean;
inputValue?: string;
isFocused?: boolean;
revealPassword?: boolean; // 主要用于 password 的时候切换一下显影
}
export default class TextControl extends React.PureComponent<
@ -139,10 +141,12 @@ export default class TextControl extends React.PureComponent<
props.multiple || props.creatable === false
? ''
: this.valueToString(value),
isFocused: false
isFocused: false,
revealPassword: false
};
this.focus = this.focus.bind(this);
this.clearValue = this.clearValue.bind(this);
this.toggleRevealPassword = this.toggleRevealPassword.bind(this);
this.inputRef = this.inputRef.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleFocus = this.handleFocus.bind(this);
@ -742,6 +746,10 @@ export default class TextControl extends React.PureComponent<
);
}
toggleRevealPassword() {
this.setState({revealPassword: !this.state.revealPassword});
}
renderNormal(): JSX.Element {
const {
classPrefix: ns,
@ -757,6 +765,7 @@ export default class TextControl extends React.PureComponent<
min,
step,
clearable,
revealPassword = true,
name,
borderMode,
prefix,
@ -789,7 +798,7 @@ export default class TextControl extends React.PureComponent<
ref={this.inputRef}
disabled={disabled}
readOnly={readOnly}
type={type}
type={this.state.revealPassword ? 'text' : type}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
max={max}
@ -805,6 +814,18 @@ export default class TextControl extends React.PureComponent<
<Icon icon="input-clear" className="icon" />
</a>
) : null}
{type === 'password' && revealPassword && !disabled ? (
<a
onClick={this.toggleRevealPassword}
className={`${ns}TextControl-revealPassword`}
>
{this.state.revealPassword ? (
<i className="fa fa-eye"></i>
) : (
<i className="fa fa-eye-slash"></i>
)}
</a>
) : null}
{showCounter ? (
<span className={cx('TextControl-counter')}>
{`${this.valueToString(value)?.length}${