输入框封装

index.tsx

/**
 * @file 带字数指示的input
 */
import {Input} from 'antd';
import type {InputProps, TextAreaProps} from 'antd/lib/input';
import {FC} from 'react';

import './index.less';

interface ILimitInputProps extends InputProps {
    maxLength: number;
}

export const InputWithLimit: FC<ILimitInputProps> = (props) => {
    const {value, maxLength} = props;
    return (
        <Input
            {...props}
            suffix={
                <span className="suffix-limit">
                    {value?.toString().length || 0}/{maxLength}
                </span>
            }
        />
    );
};

interface ITextareaWithLimitProps extends TextAreaProps {
    maxLength: number;
}

export const TextareaWithLimit: FC<ITextareaWithLimitProps> = (props) => {
    const {value, maxLength} = props;
    return (
        <div className="textarea-suffix-wrapper">
            <Input.TextArea {...props} />
            <span className="textarea-suffix">
                {value?.toString().length || 0}/{maxLength}
            </span>
        </div>
    );
};

index.css

@import 'antd/es/style/themes/default.less';

.suffix-limit {
    color: rgba(8, 14, 26, .3);
}

.textarea-suffix-wrapper {
    position: relative;

    textarea {
        padding-bottom: 20px;
    }

    .textarea-suffix {
        position: absolute;
        right: @input-padding-horizontal-base;
        bottom: @input-padding-vertical-base;
        color: rgba(8, 14, 26, .3);
    }
}