ant-design-vue/components/input/Password.js

77 lines
1.9 KiB
JavaScript
Raw Normal View History

2019-04-07 09:19:18 +00:00
import classNames from 'classnames';
import Input from './Input';
import Icon from '../icon';
import inputProps from './inputProps';
import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin';
const ActionMap = {
click: 'click',
hover: 'mouseover',
};
export default {
name: 'AInputPassword',
model: {
prop: 'value',
event: 'change.value',
},
props: {
...inputProps,
prefixCls: PropTypes.string.def('ant-input-password'),
inputPrefixCls: PropTypes.string.def('ant-input'),
action: PropTypes.string.def('click'),
visibilityToggle: PropTypes.bool.def(true),
},
data() {
return {
visible: false,
};
},
mixins: [BaseMixin],
methods: {
2019-04-10 00:51:42 +00:00
onChange() {
2019-04-07 09:19:18 +00:00
this.setState({
visible: !this.visible,
});
},
getIcon() {
const { prefixCls, action } = this.$props;
const iconTrigger = ActionMap[action] || '';
const iconProps = {
props: {
type: this.visible ? 'eye' : 'eye-invisible',
},
on: {
[iconTrigger]: this.onChange,
2019-09-11 10:11:48 +00:00
mousedown: e => {
2019-04-07 09:19:18 +00:00
// Prevent focused state lost
// https://github.com/ant-design/ant-design/issues/15173
e.preventDefault();
},
},
class: `${prefixCls}-icon`,
key: 'passwordIcon',
};
return <Icon {...iconProps} />;
},
},
render() {
2019-05-28 03:37:38 +00:00
const { prefixCls, inputPrefixCls, size, suffix, visibilityToggle, ...restProps } = this.$props;
2019-04-07 09:19:18 +00:00
const suffixIcon = visibilityToggle && this.getIcon();
const inputClassName = classNames(prefixCls, {
[`${prefixCls}-${size}`]: !!size,
});
return (
<Input
{...restProps}
type={this.visible ? 'text' : 'password'}
size={size}
class={inputClassName}
prefixCls={inputPrefixCls}
suffix={suffixIcon}
/>
);
},
};