Lzh on GitHub

Editable

显示用于编辑单行文本的输入字段，加载时呈现为静态文本。触发编辑交互后，它会转换为文本输入字段。
<script setup lang="ts">
import { EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from 'reka-ui'
</script>

<template>
  <div class="w-[250px]">
    <EditableRoot
      v-slot="{ isEditing }"
      default-value="Click to edit 'Reka UI'"
      placeholder="Enter text..."
      class="flex flex-col gap-4"
      auto-resize
    >
      <EditableArea class="text-stone-700 dark:text-white w-[250px]">
        <EditablePreview />
        <EditableInput class="w-full placeholder:text-stone-700 dark:placeholder:text-white" />
      </EditableArea>
      <EditableEditTrigger
        v-if="!isEditing"
        class="w-max inline-flex items-center justify-center rounded-lg font-medium text-sm px-[15px] leading-[35px] h-[35px] bg-white text-green11 shadow-sm border outline-none hover:bg-stone-50 focus:shadow-[0_0_0_2px] focus:shadow-black"
      />
      <div
        v-else
        class="flex gap-2"
      >
        <EditableSubmitTrigger
          class="inline-flex items-center justify-center rounded-lg font-medium text-sm px-[15px] leading-[35px] h-[35px] bg-white text-green11 shadow-sm border outline-none hover:bg-stone-50 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
        <EditableCancelTrigger
          class="inline-flex items-center justify-center rounded-lg font-medium text-sm px-[15px] leading-[35px] h-[35px] bg-red-500 text-white shadow-sm border dark:border-red10 outline-none hover:bg-red10 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
      </div>
    </EditableRoot>
  </div>
</template>

特性 (Features)

  • 完整的键盘导航
  • 可控或非控
  • 焦点完全受管理

安装 (Installation)

从命令行安装组件。

$ npm add reka-ui

结构 (Anatomy)

导入所有部件并组装它们。

<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 参考 (API Reference)

根 (Root)

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

属性默认值类型描述
activationMode'focus''dblclick' | 'focus' | 'none'可编辑字段的激活事件
as'div'AsTag | Component此组件应渲染为的元素或组件。可通过 asChild 覆盖。
asChildboolean将默认渲染的元素替换为作为子元素传递的元素，合并它们的 props 和行为。阅读我们的组合指南了解更多详情。
autoResizefalseboolean可编辑字段是否应自动调整大小
defaultValuestring可编辑字段的默认值
dir'ltr' | 'rtl'日历的阅读方向（如果适用）。如果省略，则全局继承自 ConfigProvider 或假定为 LTR（从左到右）阅读模式。
disabledfalseboolean可编辑字段是否禁用
idstring字段的 id
maxLengthnumber允许的最大字符数
modelValuestring | null可编辑字段的值
namestring字段的名称。作为名称/值对的一部分随其所属的表单一起提交。
placeholder'Enter text...'string | { edit: string; preview: string; }可编辑字段的占位符
readonlyboolean可编辑字段是否只读
requiredfalseboolean当 true 时，表示用户必须在提交所属表单之前设置值。
selectOnFocusfalseboolean聚焦时是否选择输入中的文本。
startWithEditModeboolean是否以编辑模式开始活动
submitMode'blur''blur' | 'none' | 'enter' | 'both'可编辑字段的提交事件

事件

事件Payload描述
submit[value: string | null]提交值时调用的事件处理程序
update:modelValue[value: string]模型值更改时调用的事件处理程序
update:state[state: 'cancel' | 'submit' | 'edit']可编辑字段状态更改时调用的事件处理程序

默认插槽

插槽参数插槽参数类型描述
isEditingboolean可编辑字段是否处于编辑模式
modelValuestring | null | undefined可编辑字段的值
isEmptyboolean可编辑字段是否为空
submit(): void提交可编辑字段值的函数
cancel(): void取消可编辑字段值的函数
edit(): void将可编辑字段设置为编辑模式的函数

方法 (Methods)

方法名称类型
submit() => void
cancel() => void
edit() => void

区域 (Area)

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

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

数据属性 (Data Attributes)

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

输入 (Input)

包含可编辑组件的输入。

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

数据属性 (Data Attributes)

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

预览 (Preview)

包含可编辑组件的预览。

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

编辑触发器 (Edit Trigger)

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

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

提交触发器 (Submit Trigger)

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

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

取消触发器 (Cancel Trigger)

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

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

示例 (Examples)

仅在提交时更改 (Change only on submit)

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

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

可访问性 (Accessibility)

键盘交互 (Keyboard Interactions)

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