Skip to content

文本域

属性 ​

属性类型默认值说明
v-modelstring—必需。文本域的内容,通过 v-model 双向绑定。
labelstring—必需。字段的可见标签。
idstring—关联 ID 的前缀,省略时自动生成。
size'sm' | 'md' | 'lg'md文本域的高度尺寸。
rowsnumber—原生 textarea 的 rows 属性。
colsnumber—原生 textarea 的 cols 属性。
minlengthnumber | string—原生 textarea 的 minlength 属性。
maxlengthnumber | string—原生 textarea 的 maxlength 属性。
wrap'soft' | 'hard'soft原生 textarea 的 wrap 属性。
resize'none' | 'both' | 'horizontal' | 'vertical'vertical原生 resize 样式,控制可拖拽调整的方向。默认 vertical,只允许垂直拖动。
placeholderstring—输入为空时显示的占位文本,不能替代 label。
descriptionstring—显示在标签下方的补充说明。
isLabelHiddenbooleanfalse在视觉上隐藏标签,仍保留无障碍名称。
isDisabledbooleanfalse禁用文本域,内容不可修改,值也不会随表单提交。
disabledMessagestring—说明禁用原因。设置后,被禁用的文本域仍可聚焦,以便用户查看原因。
isReadOnlybooleanfalse内容只读、不可修改,但值仍会随表单提交。
isRequiredbooleanfalse显示必填提示,但不会执行浏览器原生的必填校验。
isOptionalbooleanfalse显示可选提示。与 isRequired 同时设置时优先。
requiredLabelstringRequired必填提示的显示文字,用于本地化。
optionalLabelstringOptional可选提示的显示文字,用于本地化。
widthnumber | string—整个字段的宽度。数字按像素处理,CSS 字符串按原样使用。
htmlNamestring—原生 textarea 的 name 属性,优先于通过原生属性传入的 name。
formstring—原生 form 属性,通过 ID 关联所属表单。
statusFieldStatusInput—设置字段的错误、警告或成功校验状态,可附带消息。
statusVariant'attached' | 'detached' | 'tooltip'detached状态消息的展示方式。文本域默认为 detached,消息显示在控件下方。
changeAction(value: string, event) => void | Promise<void>—内容变化后执行的动作。返回 Promise 时,组件会显示加载状态。
isLoadingbooleanfalse控制加载指示器的显示。
hasClearbooleanfalse在有内容且可编辑时显示清空按钮,点击后清空内容。
hasAutoFocusbooleanfalse组件挂载后自动聚焦文本域。
clearLabelstring—清空按钮的无障碍标签。
loadingLabelstringLoading加载指示器的无障碍标签。
labelIconComponent—显示在标签前的装饰图标。
labelTooltipstring—在标签旁显示信息提示,悬停、键盘聚焦或点击都可以查看。

事件 ​

  • 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 自动适配明暗模式。