可编辑控件

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

View code

Click to edit '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 参考

根组件 (Root)

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

Prop	Default	Type
`activationMode`	`'focus'`	`'dblclick' \| 'focus' \| 'none'` The activation event of the editable field
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`autoResize`	`false`	`boolean` Whether the editable field should auto resize
`defaultValue`		`string` The default value of the editable field
`dir`		`'ltr' \| 'rtl'` The reading direction of the calendar when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`	`false`	`boolean` Whether the editable field is disabled
`id`		`string` The id of the field
`maxLength`		`number` The maximum number of characters allowed
`modelValue`		`string \| null` The value of the editable field
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`placeholder`	`'Enter text...'`	`string \| { edit: string; preview: string; }` The placeholder for the editable field
`readonly`		`boolean` Whether the editable field is read-only
`required`	`false`	`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`selectOnFocus`	`false`	`boolean` Whether to select the text in the input when it is focused.
`startWithEditMode`		`boolean` Whether to start with the edit mode active
`submitMode`	`'blur'`	`'blur' \| 'none' \| 'enter' \| 'both'` The submit event of the editable field

Emit	Payload
`submit`	`[value: string \| null]` Event handler called when a value is submitted
`update:modelValue`	`[value: string]` Event handler called whenever the model value changes
`update:state`	`[state: 'cancel' \| 'submit' \| 'edit']` Event handler called when the editable field changes state

Slots (default)	Payload
`isEditing`	`boolean` Whether the editable field is in edit mode
`modelValue`	`string \| null \| undefined` The value of the editable field
`isEmpty`	`boolean` Whether the editable field is empty
`submit`	`(): void` Function to submit the value of the editable
`cancel`	`(): void` Function to cancel the value of the editable
`edit`	`(): void` Function to set the editable in edit mode

Methods	Type
`submit`	`() => void` Function to submit the value of the editable
`cancel`	`() => void` Function to cancel the value of the editable
`edit`	`() => void` Function to set the editable in edit mode

区域组件 (Area)

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

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-readonly]`	只读状态时存在
`[data-disabled]`	禁用状态时存在
`[data-placeholder-shown]`	显示预览时存在
`[data-empty]`	输入为空时存在
`[data-focus]`	可编辑字段获得焦点时存在（将被 [data-focused] 取代）
`[data-focused]`	可编辑字段获得焦点时存在

输入框组件 (Input)

包含可编辑组件的输入部件。

Prop	Default	Type
`as`	`'input'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-readonly]`	只读状态时存在
`[data-disabled]`	禁用状态时存在

预览组件 (Preview)

包含可编辑组件的预览部件。

Prop	Default	Type
`as`	`'span'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

编辑触发器组件 (Edit Trigger)

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

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

提交触发器组件 (Submit Trigger)

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

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

取消触发器组件 (Cancel Trigger)

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

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

示例

仅在提交时变更

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

vue

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

无障碍访问

键盘交互

Key	Description
`Tab`	当焦点移至可编辑字段时，若 `activation-mode` 设置为 focus 则进入编辑模式
`Enter`	若 `submit-mode` 设置为 `enter` 或 `both`，则提交变更
`Escape`	当焦点位于可编辑字段时，取消变更

可编辑控件 ​

功能特性 ​

安装 ​

结构 ​

API 参考 ​

根组件 (Root) ​

区域组件 (Area) ​

输入框组件 (Input) ​

预览组件 (Preview) ​

编辑触发器组件 (Edit Trigger) ​

提交触发器组件 (Submit Trigger) ​

取消触发器组件 (Cancel Trigger) ​

示例 ​

仅在提交时变更 ​

无障碍访问 ​

键盘交互 ​