Skip to content

Editable 就地编辑

点击/回车/空格进入编辑态,Enter 提交、Esc 取消,空值提交默认非破坏。

基础用法

点击编辑

点击文本(或聚焦后按 Enter/空格)进入编辑,Enter 提交、Esc 还原。

占位符

空值占位

值为空时展示 placeholder

submit-on-enter=false

回车不提交

submit-on-enter=falseEnter 不提交,改用编辑态内的确认按钮。

maxlength

长度限制

禁用

disabled

事件

提交/取消事件

监听 oas-change(提交)与 oas-cancel(取消/空值提交):

API

属性

属性说明类型默认值
disabled禁用boolean
maxlength输入最大长度string
placeholder空值占位string
submit-on-enter是否允许 Enter 提交stringtrue
value当前值(受控)string

事件

事件说明
oas-cancel取消/空值提交(还原旧值),默认非破坏,detail: { value: oldValue }
oas-change提交新值,detail: { value }

键盘:展示态 Enter/空格/点击进入编辑;编辑态 Enter 提交、Esc 还原失焦。

ARIA:展示态 role="button" + aria-label="编辑",编辑态输入框保持同一 label。