Light
Solid

ATextarea

ATextarea is a multiline text field that can grow with its content or expose the native drag handle for manual resizing. It supports v-model, Ctrl/Cmd+Enter to submit, and before / after slots for surrounding content.

Import

import { Textarea } from '@any-design/anyui/vue';
// React:  import { Textarea } from '@any-design/anyui/react';
// Svelte: import { Textarea } from '@any-design/anyui/svelte';

Basic usage

<template>
  <ATextarea
    v-model="msg"
    auto-match-height
    :min-rows="2"
    :max-rows="6"
    placeholder="Write a message…"
  />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('This textarea grows with the content.');
</script>

Examples

Manual resize

Set resizable to let the user drag the native resize handle. minRows and maxRows still provide sensible bounds.

<template>
  <ATextarea
    v-model="msg"
    resizable
    :min-rows="3"
    :max-rows="8"
    placeholder="Drag the corner to resize"
  />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('Manual resizing is useful for notes, prompts, and long comments.');
</script>

Controlling height

minRows sets the resting height; maxRows is the threshold past which the field starts scrolling instead of growing.

<template>
  <ATextarea v-model="msg" :min-rows="2" :max-rows="6" placeholder="2–6 rows" />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('');
</script>

Submit on Ctrl/Cmd + Enter

The submit event fires with the current value when the user presses Ctrl/Cmd + Enter — handy for chat or comment boxes.

<template>
  <ATextarea v-model="msg" placeholder="Press ⌘/Ctrl + Enter to send" @submit="onSend" />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('');
const onSend = (value) => { console.log('sent:', value); msg.value = ''; };
</script>

States and slots

Use disabled, readonly, and borderless for different modes. The after slot is a convenient place for a toolbar.

<template>
  <ATextarea v-model="msg" placeholder="Add a note">
    <template #after>
      <AButton type="primary" size="small" @click="save">Save</AButton>
    </template>
  </ATextarea>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('');
const save = () => console.log(msg.value);
</script>

Props

Prop Type Default Description
modelValue String ‘’ Bound value (v-model).
placeholder String ‘’ Placeholder text.
minRows Number 3 Minimum height in rows.
maxRows Number 10 Maximum height in rows (scrolls past it).
lineHeight Number 1.5 Line-height used for height math.
readonly Boolean false Read-only.
disabled Boolean false Disabled.
resizable Boolean false Enables the native vertical resize handle.
disableResizeCorner Boolean false Hides the native resize handle when manual resizing is enabled.
autoMatchHeight Boolean false Continuously match content height up to maxRows.
borderless Boolean false Removes the border.
maxlength / minlength Number undefined Native length constraints.
autocomplete String ‘off’ Native autocomplete.

Events

Event Payload Description
update:modelValue String Value change.
input / change InputEvent Native events.
blur FocusEvent Native blur.
submit String On Ctrl/Cmd + Enter.

Slots

Slot Props Description
before — Content above the textarea.
after — Content below the textarea.

ATextarea

ATextarea 是多行文本框，可以随内容自适应高度，也可以开启原生拖拽手柄让用户手动调整尺寸。它支持 v-model、Ctrl/Cmd + Enter 提交，以及 before / after 插槽用于放置周边内容。

引入

import { Textarea } from '@any-design/anyui/vue';
// React:  import { Textarea } from '@any-design/anyui/react';
// Svelte: import { Textarea } from '@any-design/anyui/svelte';

基础用法

<template>
  <ATextarea
    v-model="msg"
    auto-match-height
    :min-rows="2"
    :max-rows="6"
    placeholder="写点什么…"
  />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('这个文本框会根据内容自动增高。');
</script>

示例

手动拖拽调整

设置 resizable 后，用户可以拖动原生缩放手柄。minRows 与 maxRows 仍然用于提供合理边界。

<template>
  <ATextarea
    v-model="msg"
    resizable
    :min-rows="3"
    :max-rows="8"
    placeholder="拖动右下角调整大小"
  />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('手动调整适合备注、提示词和长评论。');
</script>

控制高度

minRows 设置初始高度；maxRows 是开始滚动而非继续增高的阈值。

<template>
  <ATextarea v-model="msg" :min-rows="2" :max-rows="6" placeholder="2–6 行" />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('');
</script>

Ctrl/Cmd + Enter 提交

按下 Ctrl/Cmd + Enter 时会触发 submit 事件并返回当前值 —— 适合聊天或评论框。

<template>
  <ATextarea v-model="msg" placeholder="按 ⌘/Ctrl + Enter 发送" @submit="onSend" />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('');
const onSend = (value) => { console.log('已发送：', value); msg.value = ''; };
</script>

状态与插槽

disabled、readonly、borderless 对应不同模式。after 插槽是放置工具栏的好位置。

<template>
  <ATextarea v-model="msg" placeholder="添加备注">
    <template #after>
      <AButton type="primary" size="small" @click="save">保存</AButton>
    </template>
  </ATextarea>
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('');
const save = () => console.log(msg.value);
</script>

属性

属性 类型 默认值 说明
modelValue String ‘’ 绑定值（v-model）。
placeholder String ‘’ 占位文本。
minRows Number 3 最小高度（行）。
maxRows Number 10 最大高度（行），超过后滚动。
lineHeight Number 1.5 用于高度计算的行高。
readonly Boolean false 只读。
disabled Boolean false 禁用。
resizable Boolean false 启用原生纵向缩放手柄。
disableResizeCorner Boolean false 手动缩放开启时隐藏原生缩放手柄。
autoMatchHeight Boolean false 持续匹配内容高度，最高到 maxRows。
borderless Boolean false 移除边框。
maxlength / minlength Number undefined 原生长度约束。
autocomplete String ‘off’ 原生 autocomplete。

事件

事件 载荷 说明
update:modelValue String 值变化。
input / change InputEvent 原生事件。
blur FocusEvent 原生 blur。
submit String Ctrl/Cmd + Enter 时触发。

插槽

插槽 作用域参数 说明
before — 文本框上方的区域。
after — 文本框下方的区域。
Show code
<!-- Demo 1 -->
<template>
  <ATextarea
    v-model="msg"
    auto-match-height
    :min-rows="2"
    :max-rows="6"
    placeholder="Write a message…"
  />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('This textarea grows with the content.');
</script>

<!-- Demo 2 -->
<template>
  <ATextarea
    v-model="msg"
    resizable
    :min-rows="3"
    :max-rows="8"
    placeholder="Drag the corner to resize"
  />
</template>

<script setup>
import { ref } from 'vue';
const msg = ref('Manual resizing is useful for notes, prompts, and long comments.');
</script>
EN
中文