多行文本
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 | "先说明任务,再选择组件。" |
rows | 2 |
maxLength | 160 |
help | "可换行,最多 160 字" |
disabled | false |
required | false |
id | — |
attributes | — |
placeholder | — |
readOnly | — |
min | — |
max | — |
step | — |
minLength | — |
autocomplete | — |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 允许换行与粘贴,避免拦截输入法组字。
- 字数限制和错误提示需文字说明。
和相似组件的区别
Textarea 是文本字段;编辑器还管理富文本结构与工具栏。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验