uiUI 组件系统
对比

多行文本

Textarea

让用户输入需要换行的较长文本。

交互预览实时预览

可换行,最多 160 字

输入或换行
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'textarea'
);

view.element.addEventListener('ui:change', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

备注、描述、反馈和多段内容草稿。

什么时候不用

结构化字段不要用一整块自由文本代替。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
label"设计备注"
name"sample-note"
value"先说明任务,再选择组件。"
rows2
maxLength160
help"可换行,最多 160 字"
disabledfalse
requiredfalse
id—
attributes—
placeholder—
readOnly—
min—
max—
step—
minLength—
autocomplete—

事件

ui:change

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 允许换行与粘贴,避免拦截输入法组字。
  • 字数限制和错误提示需文字说明。

和相似组件的区别

Textarea 是文本字段;编辑器还管理富文本结构与工具栏。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Element PlusInput textarea
官方提供

官方 Input 文档提供 textarea 类型。

关键状态

空值已填写超出限制只读

Vue / Nuxt · 来源核验

一起了解

单行文本输入 ↗提示输入 ↗表单与字段 ↗