Editable

就地编辑一段文字：列表卡片改名、顶栏文档名、素材名。平时是文字，进入编辑换成输入框并全选，回车或失焦（点外面）提交，Esc 放弃；去掉首尾空白后与原值相同不提交，提交的是去掉首尾空白的值。行为层是 Reka 的 Editable。

基础

activation 定怎么进入：dblclick（默认）/ click / focus / none。前两种在文字上按 Enter 或 F2 也能进入——键盘用户点不了双击。占位与字数上限由调用方传（placeholder / maxlength），组件里不写「未命名」这类文案。

双击改名 / 单击进入

季度汇报

未命名画板

双击标题改名(或聚焦后按 Enter / F2);提交记录:无

由宿主打开

右键菜单「重命名」这类入口：v-model:editing 打开编辑，activation="none" 时文字本身不接点击。宿主把 editing 改回 false 等同失焦，会提交已敲的字。

按钮打开编辑

素材 01.png

键盘

回车与 Esc 用掉后只标 defaultPrevented、不拦传播：编辑中的 Esc 是撤回编辑，外面的弹层见到就不跟着关；宿主的全局快捷键对 defaultPrevented 与可编辑元素里的焦点让路。提交或放弃后焦点回到文字上。

API

Props

名称	类型	默认值	说明
`placeholder`	`string \| undefined`	`undefined`	没有值时显示的占位
`maxlength`	`number \| undefined`	`undefined`	—
`label`	`string \| undefined`	`undefined`	输入框的读屏名,缺省是 locale 的 `editable.label`
`activation`	`"none" \| "dblclick" \| "click" \| "focus" \| undefined`	`"dblclick"`	怎么进入编辑:双击(默认)/ 单击 / 获得焦点 / 只由 `v-model:editing` 控制。前两种在文字上按 Enter 或 F2 也能进入
`disabled`	`boolean \| undefined`	`false`	—
`modelValue`	`string \| undefined`	—	—
`editing`	`boolean \| undefined`	`false`	—

Emits

事件	载荷	说明
`update:modelValue`	`[value: string \| undefined]`	—
`commit`	`[value: string]`	—
`update:editing`	`[value: boolean]`	—