Editable 就地编辑
点击/回车/空格进入编辑态,Enter 提交、Esc 取消,空值提交默认非破坏。
基础用法
点击编辑
点击文本(或聚焦后按 Enter/空格)进入编辑,Enter 提交、Esc 还原。
占位符
空值占位
值为空时展示 placeholder。
submit-on-enter=false
回车不提交
submit-on-enter=false 时 Enter 不提交,改用编辑态内的确认按钮。
maxlength
长度限制
禁用
disabled
事件
提交/取消事件
监听 oas-change(提交)与 oas-cancel(取消/空值提交):
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
disabled | 禁用 | boolean | — |
maxlength | 输入最大长度 | string | — |
placeholder | 空值占位 | string | — |
submit-on-enter | 是否允许 Enter 提交 | string | true |
value | 当前值(受控) | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-cancel | 取消/空值提交(还原旧值),默认非破坏,detail: { value: oldValue } |
oas-change | 提交新值,detail: { value } |
键盘:展示态 Enter/空格/点击进入编辑;编辑态 Enter 提交、Esc 还原失焦。
ARIA:展示态 role="button" + aria-label="编辑",编辑态输入框保持同一 label。