Textarea props都有哪些可以传递的值

<t-chat-sender
  v-model="inputValue"
  :textarea-props="{
    placeholder: '请输入内容',
    maxlength: 200,
    autosize: { minRows: 1, maxRows: 2 },
  }"
  :loading="status === 'pending' || status === 'streaming'"
  @send="handleSend"
  @stop="handleStop"
>
  <template #footer-prefix>
    <div class="ai-declare">内容由AI生成</div>
  </template>
</t-chat-sender>

textarea-props 本质上是 透传给内部的 t-textarea 组件 的属性。也就是说 —— 你能传的，取决于 TDesign Vue Next 的 Textarea 组件支持哪些 props。

所以规则很简单：

查 t-textarea 文档 = textarea-props 能传的全部能力

✅ 最常用的 textarea-props 参数

下面这些在聊天输入框场景里最实用：

1️⃣ 基础输入控制

:textarea-props="{
  placeholder: '请输入内容',
  maxlength: 200,          // 最大字数
  disabled: false,         // 禁用
  readonly: false,         // 只读
  autofocus: true,         // 自动聚焦
}"

2️⃣ 行数 & 自适应高度 ⭐（强烈推荐）

:textarea-props="{
  autosize: { minRows: 2, maxRows: 6 }
}"

等价于 Element 的：

输入时高度自动增长，最多6行

如果你不想自增高：

:textarea-props="{ autosize: false, rows: 3 }"

3️⃣ 字数统计显示

:textarea-props="{
  maxlength: 200,
  showLimitNumber: true   // 显示 0/200
}"

4️⃣ 清空按钮

:textarea-props="{
  clearable: true
}"

5️⃣ 输入事件（高级）

:textarea-props="{
  onFocus: () => console.log('focus'),
  onBlur: () => console.log('blur'),
  onChange: (val) => console.log(val),
  onKeydown: (e) => console.log(e)
}"

6️⃣ 回车行为控制（聊天场景关键）

默认 Enter 就是发送，如果你想改为：

:textarea-props="{
  autosize: { minRows: 2, maxRows: 6 },
  onKeydown: (e) => {
    if (e.key === 'Enter' && e.shiftKey) return   // Shift+Enter 换行
  }
}"

（实际发送逻辑还是由 t-chat-sender 控制）

7️⃣ 样式类名

:textarea-props="{
  className: 'chat-input-area',
  style: { fontSize: '15px' }
}"

❗ 注意区别

属性	作用对象
placeholder	要写在 textarea-props 里（你现在是对的）
loading	是 `t-chat-sender` 的，不是 textarea
autosize	textarea 专属
maxlength	textarea 专属

🎯 给你一套 AI 聊天推荐配置

:textarea-props="{
  placeholder: '请输入内容，Shift + Enter 换行',
  maxlength: 500,
  showLimitNumber: true,
  autosize: { minRows: 2, maxRows: 6 },
  clearable: true
}"

体验会非常接近主流 AI 聊天产品。

如果你还想做：

超过字数禁止发送
空内容禁止发送
输入时动态提示剩余字数变红

我可以帮你把 发送前校验逻辑 也接入到 t-chat-sender。