可编辑

显示一个用于编辑单行文本的输入字段，加载时以静态文本形式渲染。当触发编辑交互时，它会转换为文本输入字段。

查看代码

点击编辑“Reka UI”

特性

全键盘导航
可控或不可控
焦点完全由组件管理

安装

从命令行安装此组件。

$ npm add reka-ui

结构

导入所有部分并将其组合。

vue

<script setup>
import {
  EditableArea,
  EditableCancelTrigger,
  EditableEditTrigger,
  EditableInput,
  EditablePreview,
  EditableRoot,
  EditableSubmitTrigger
} from 'reka-ui'
</script>

<template>
  <EditableRoot>
    <EditableArea>
      <EditablePreview />
      <EditableInput />
    </EditableArea>
    <EditableEditTrigger />
    <EditableSubmitTrigger />
    <EditableCancelTrigger />
  </EditableRoot>
</template>

API 参考

根

包含可编辑组件的所有部分。

属性	默认	类型
`activationMode`	`'focus'`	`'dblclick' \| 'focus' \| 'none'` 可编辑字段的激活事件
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。
`autoResize`	`false`	`布尔值` 可编辑字段是否应自动调整大小
`defaultValue`		`string` 可编辑字段的默认值
`dir`		`'ltr' \| 'rtl'` 日历的阅读方向（如适用）。如果省略，则全局继承自 `ConfigProvider` 或假定为 LTR（从左到右）阅读模式。
`disabled`	`false`	`布尔值` 可编辑字段是否被禁用
`id`		`string` 字段的 ID
`maxLength`		`数字` 允许的最大字符数
`modelValue`		`string \| null` 可编辑字段的值
`name`		`string` 字段的名称。随其所属的表单一起作为名称/值对提交。
`placeholder`	`'Enter text...'`	`string \| { edit: string; preview: string; }` 可编辑字段的占位符
`readonly`		`布尔值` 可编辑字段是否为只读
`required`	`false`	`布尔值` 当为 `true` 时，表示用户必须在所属表单提交前设置值。
`selectOnFocus`	`false`	`布尔值` 当输入框获得焦点时是否选择文本。
`startWithEditMode`		`布尔值` 是否以编辑模式启动
`submitMode`	`'blur'`	`'blur' \| 'none' \| 'enter' \| 'both'` 可编辑字段的提交事件

事件触发	载荷
`submit`	`[value: string \| null]` 提交值时调用的事件处理程序
`update:modelValue`	`[value: string]` 每当模型值改变时调用的事件处理程序
`update:state`	`[state: 'cancel' \| 'submit' \| 'edit']` 可编辑字段状态更改时调用的事件处理程序

插槽（默认）	载荷
`isEditing`	`布尔值` 可编辑字段是否处于编辑模式
`modelValue`	`string \| null \| undefined` 可编辑字段的值
`isEmpty`	`布尔值` 可编辑字段是否为空
`submit`	`(): void` 提交可编辑字段值的函数
`cancel`	`(): void` 取消可编辑字段值的函数
`edit`	`(): void` 将可编辑字段设置为编辑模式的函数

方法	类型
`submit`	`() => void` 提交可编辑字段值的函数
`cancel`	`() => void` 取消可编辑字段值的函数
`edit`	`() => void` 将可编辑字段设置为编辑模式的函数

区域

包含可编辑组件的文本部分。

属性	默认	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

数据属性	值
`[data-readonly]`	只读时存在
`[data-disabled]`	禁用时存在
`[data-placeholder-shown]`	当预览显示时存在
`[data-empty]`	当输入为空时存在
`[data-focus]`	当可编辑字段获得焦点时存在。将弃用，转而使用 [data-focused]
`[data-focused]`	当可编辑字段获得焦点时存在

输入

包含可编辑组件的输入。

属性	默认	类型
`as`	`'input'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

数据属性	值
`[data-readonly]`	只读时存在
`[data-disabled]`	禁用时存在

预览

包含可编辑组件的预览。

属性	默认	类型
`as`	`'span'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

编辑触发器

包含可编辑组件的编辑触发器。

属性	默认	类型
`as`	`'button'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

提交触发器

包含可编辑组件的提交触发器。

属性	默认	类型
`as`	`'button'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

取消触发器

包含可编辑组件的取消触发器。

属性	默认	类型
`as`	`'button'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可通过 `asChild` 覆盖。
`asChild`		`布尔值` 更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。阅读我们的组合指南了解更多详情。

示例

仅在提交时更改

默认情况下，组件会在 blur 事件触发时提交。我们可以修改 submit-mode 属性来改变此行为。在此情况下，我们希望仅在用户点击 EditableSubmitTrigger 时提交，因此我们将提交模式更改为 none。

vue

<template>
  <EditableRoot submit-mode="none">
    <EditableArea>
      <EditablePreview />
      <EditableInput />
    </EditableArea>
    <EditableEditTrigger />
    <EditableSubmitTrigger />
    <EditableCancelTrigger />
  </EditableRoot>
</template>

可访问性

键盘交互

键	描述
`Tab 键`	当焦点移动到可编辑字段时，如果 `activation-mode` 设置为 focus，则切换到编辑模式。
`回车键`	如果 `submit-mode` 设置为 `enter` 或 `both`，它将提交更改。
`Escape 键`	当焦点在可编辑字段上时，取消更改。

可编辑 ​

特性 ​

安装 ​

结构 ​

API 参考 ​

根 ​

区域 ​

输入 ​

预览 ​

编辑触发器 ​

提交触发器 ​

取消触发器 ​

示例 ​

仅在提交时更改 ​

可访问性 ​

键盘交互 ​

可编辑

特性

安装

结构