文本域
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
v-model | string | — | 必需。文本域的内容,通过 v-model 双向绑定。 |
label | string | — | 必需。字段的可见标签。 |
id | string | — | 关联 ID 的前缀,省略时自动生成。 |
size | 'sm' | 'md' | 'lg' | md | 文本域的高度尺寸。 |
rows | number | — | 原生 textarea 的 rows 属性。 |
cols | number | — | 原生 textarea 的 cols 属性。 |
minlength | number | string | — | 原生 textarea 的 minlength 属性。 |
maxlength | number | string | — | 原生 textarea 的 maxlength 属性。 |
wrap | 'soft' | 'hard' | soft | 原生 textarea 的 wrap 属性。 |
resize | 'none' | 'both' | 'horizontal' | 'vertical' | vertical | 原生 resize 样式,控制可拖拽调整的方向。默认 vertical,只允许垂直拖动。 |
placeholder | string | — | 输入为空时显示的占位文本,不能替代 label。 |
description | string | — | 显示在标签下方的补充说明。 |
isLabelHidden | boolean | false | 在视觉上隐藏标签,仍保留无障碍名称。 |
isDisabled | boolean | false | 禁用文本域,内容不可修改,值也不会随表单提交。 |
disabledMessage | string | — | 说明禁用原因。设置后,被禁用的文本域仍可聚焦,以便用户查看原因。 |
isReadOnly | boolean | false | 内容只读、不可修改,但值仍会随表单提交。 |
isRequired | boolean | false | 显示必填提示,但不会执行浏览器原生的必填校验。 |
isOptional | boolean | false | 显示可选提示。与 isRequired 同时设置时优先。 |
requiredLabel | string | Required | 必填提示的显示文字,用于本地化。 |
optionalLabel | string | Optional | 可选提示的显示文字,用于本地化。 |
width | number | string | — | 整个字段的宽度。数字按像素处理,CSS 字符串按原样使用。 |
htmlName | string | — | 原生 textarea 的 name 属性,优先于通过原生属性传入的 name。 |
form | string | — | 原生 form 属性,通过 ID 关联所属表单。 |
status | FieldStatusInput | — | 设置字段的错误、警告或成功校验状态,可附带消息。 |
statusVariant | 'attached' | 'detached' | 'tooltip' | detached | 状态消息的展示方式。文本域默认为 detached,消息显示在控件下方。 |
changeAction | (value: string, event) => void | Promise<void> | — | 内容变化后执行的动作。返回 Promise 时,组件会显示加载状态。 |
isLoading | boolean | false | 控制加载指示器的显示。 |
hasClear | boolean | false | 在有内容且可编辑时显示清空按钮,点击后清空内容。 |
hasAutoFocus | boolean | false | 组件挂载后自动聚焦文本域。 |
clearLabel | string | — | 清空按钮的无障碍标签。 |
loadingLabel | string | Loading | 加载指示器的无障碍标签。 |
labelIcon | Component | — | 显示在标签前的装饰图标。 |
labelTooltip | string | — | 在标签旁显示信息提示,悬停、键盘聚焦或点击都可以查看。 |
事件
update:modelValue(value):更新文本内容。change(value, event):内容变化时触发。clear(event):点击清空按钮时触发。enter(event):按 Enter 时触发。Shift + Enter 不触发。keydown(event):按键时触发。actionError(error, value, event):changeAction 抛出异常时触发。
内容变化时,update:modelValue 与 change 在 changeAction 之前触发。 取消 change 事件会阻止 changeAction 执行。
原生属性
class、style和其他属性应用于字段外层。aria-labelledby与aria-describedby合并到原生 textarea。- 组件管理 textarea 的
disabled、readonly与aria-invalid。 icon插槽在文本域左侧显示装饰图标。end插槽在文本域右侧显示附加内容。labelIcon插槽替换标签前的图标。
主题
css
.my-text-area {
--astryx-text-area-min-height-md: 120px;
}--astryx-text-area-min-height-sm:sm 尺寸最小高度。--astryx-text-area-min-height-md:md 尺寸最小高度。--astryx-text-area-min-height-lg:lg 尺寸最小高度。
其他颜色与边框变量与 TextInput 共享。Neutral 自动适配明暗模式。