feat(input-password): accept global prefixCls (#4280)

* fix(input-password): accept global prefixCls

* fix(input-password): suffix icon style
pull/4360/head
zkwolf 2021-07-08 09:51:37 +08:00 committed by GitHub
parent 5c8b82ccf4
commit 4eb26eaec3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 7 deletions

View File

@ -5,6 +5,7 @@ import Icon from '../icon';
import inputProps from './inputProps'; import inputProps from './inputProps';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
const ActionMap = { const ActionMap = {
click: 'click', click: 'click',
@ -21,11 +22,14 @@ export default {
}, },
props: { props: {
...inputProps, ...inputProps,
prefixCls: PropTypes.string.def('ant-input-password'), prefixCls: PropTypes.string,
inputPrefixCls: PropTypes.string.def('ant-input'), inputPrefixCls: PropTypes.string,
action: PropTypes.string.def('click'), action: PropTypes.string.def('click'),
visibilityToggle: PropTypes.bool.def(true), visibilityToggle: PropTypes.bool.def(true),
}, },
inject: {
configProvider: { default: () => ConfigConsumerProps },
},
data() { data() {
return { return {
visible: false, visible: false,
@ -46,8 +50,8 @@ export default {
visible: !this.visible, visible: !this.visible,
}); });
}, },
getIcon() { getIcon(prefixCls) {
const { prefixCls, action } = this.$props; const { action } = this.$props;
const iconTrigger = ActionMap[action] || ''; const iconTrigger = ActionMap[action] || '';
const iconProps = { const iconProps = {
props: { props: {
@ -74,14 +78,19 @@ export default {
}, },
render() { render() {
const { const {
prefixCls, prefixCls: customizePrefixCls,
inputPrefixCls, inputPrefixCls: customizeInputPrefixCls,
size, size,
suffix, suffix,
visibilityToggle, visibilityToggle,
...restProps ...restProps
} = getOptionProps(this); } = getOptionProps(this);
const suffixIcon = visibilityToggle && this.getIcon();
const getPrefixCls = this.configProvider.getPrefixCls;
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
const prefixCls = getPrefixCls('input-password', customizePrefixCls);
const suffixIcon = visibilityToggle && this.getIcon(prefixCls);
const inputClassName = classNames(prefixCls, { const inputClassName = classNames(prefixCls, {
[`${prefixCls}-${size}`]: !!size, [`${prefixCls}-${size}`]: !!size,
}); });