Textarea Component

Textarea component for multi-line text input, supporting adaptive height, character limit, line break control, and other features.

Basic Usage

Basic textarea usage, bind the textarea value through v-model.

Current value:

Show Code

Disabled State

Add the disabled attribute to disable the textarea.

Show Code

Resize Control

Textarea can be resized by default. Use the isResize attribute to control whether resizing is allowed.

Resizable (default):

Disable resize:

Show Code

Line Break Control

Textarea allows line breaks by default. Use the isEnter attribute to control whether line breaks are allowed.

Allow line breaks (default):

Current value:

Disable line breaks:

Current value:

Show Code

Character Limit

Set the maxLength attribute to limit the maximum input length of the textarea. By default, it shows the current cursor line number and character count. Use the isCursor attribute to control whether to show cursor line number.

Show cursor position (default):

Hide cursor position:

Current length: 0/50

Show Code

Debounced Input

Set the debounce attribute to implement debounced input, delaying the trigger of input events.

Real-time value:

Debounced value (1 second delay):

Show Code

Different Sizes

Textarea supports three sizes: small, default, and large.

Small size:

Default size:

Large size:

Show Code

Event Handling

Textarea provides multiple events: focus, blur, enter, input.

Event Log:

Show Code

Textarea API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	string	—	—
size	Size	string	small / default / large	default
placeholder	Placeholder text	string	—	—
disabled	Whether disabled	boolean	—	false
maxLength	Maximum input length	number	—	—
isCursor	Whether show current cursor line number	boolean	—	true
isResize	Whether allow resizing	boolean	—	true
isEnter	Whether allow line break input	boolean	—	true
isTip	Whether show tip text	boolean	—	true
tip	Custom tip text	string	—	—
tipClass	Tip text class name	string	—	—
debounce	Debounce event callback	(data?: string) => void	—	—
debounceDelay	Debounce delay time (ms)	number	—	1000

Events

Event Name	Description	Parameters
focus	Triggered when gaining focus	(value: string)
blur	Triggered when losing focus	(value: string)
input	Triggered when input value changes	(value: string)
enter	Triggered when Enter key is pressed	(value: string)
clear	Triggered when clear button is clicked	—

Style Variables

The textarea component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$border-color-default	Border color - Default
$font-size-default	Font size - Default