Radix Vue

外观

可编辑 ​

Alpha
显示一个用于编辑单行文本的输入字段，在加载时呈现为静态文本。当触发编辑交互时，它会转换为文本输入字段。
单击以编辑“Radix Vue”
vue
<script setup lang="ts">
import { EditableArea, EditableCancelTrigger, EditableEditTrigger, EditableInput, EditablePreview, EditableRoot, EditableSubmitTrigger } from 'radix-vue'
</script>

<template>
  <div class="w-[250px]">
    <EditableRoot
      v-slot="{ isEditing }"
      default-value="Click to edit 'Radix Vue'"
      placeholder="Enter text..."
      class="flex flex-col gap-4"
      auto-resize
    >
      <EditableArea class="text-white w-[250px]">
        <EditablePreview />
        <EditableInput class="w-full placeholder:text-white" />
      </EditableArea>
      <EditableEditTrigger
        v-if="!isEditing"
        class="w-max inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white text-green11 shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
      />
      <div
        v-else
        class="flex gap-4"
      >
        <EditableSubmitTrigger
          class="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-white text-green11 shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
        <EditableCancelTrigger
          class="inline-flex items-center justify-center rounded font-medium text-[15px] px-[15px] leading-[35px] h-[35px] bg-red9 text-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-red10 focus:shadow-[0_0_0_2px] focus:shadow-black"
        />
      </div>
    </EditableRoot>
  </div>
</template>

特性 ​

  • 完整的键盘导航
  • 可以是受控或不受控的
  • 焦点得到完全管理

安装 ​

从命令行安装组件。

sh
$ npm add radix-vue

解剖 ​

导入所有部分并将它们组合在一起。

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

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

API 参考 ​

根 ​

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

道具默认值类型
activationMode
'focus'
'dblclick' | 'focus' | 'none'

可编辑字段的激活事件

as
'div'
AsTag | Component

此组件应呈现为的元素或组件。 可以被asChild覆盖

asChild
boolean

将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

autoResize
false
boolean

可编辑字段是否应自动调整大小

defaultValue
string

可编辑字段的默认值

dir
'ltr' | 'rtl'

日历的阅读方向（如果适用）。
如果省略，将从ConfigProvider全局继承或假设 LTR（从左到右）阅读模式。

disabled
false
boolean

可编辑字段是否被禁用

id
string

字段的 ID

maxLength
number

允许的最大字符数

modelValue
string

可编辑字段的值

name
string

字段的名称

placeholder
'Enter text...'
string | { edit: string; preview: string; }

可编辑字段的占位符

readonly
boolean

可编辑字段是否为只读

required
false
boolean

当为true时，表示用户必须在拥有表单提交之前设置值。

selectOnFocus
false
boolean

是否在输入获得焦点时选择文本。

startWithEditMode
boolean

是否以激活的编辑模式启动

submitMode
'blur'
'blur' | 'none' | 'enter' | 'both'

可编辑字段的提交事件

发射有效负载
submit
[value: string]

当提交值时调用的事件处理程序

update:modelValue
[value: string]

每当模型值发生变化时调用的事件处理程序

update:state
[state: 'cancel' | 'submit' | 'edit']

当可编辑字段改变状态时调用的事件处理程序

插槽（默认）有效负载
isEditing
boolean

可编辑字段是否处于编辑模式

modelValue
string | undefined

可编辑字段的值

isEmpty
boolean

可编辑字段是否为空

submit

用于提交可编辑值的功能

cancel

用于取消可编辑值的功能

edit

用于将可编辑设置为编辑模式的功能

方法类型
submit
() => void

用于提交可编辑值的功能

cancel
() => void

用于取消可编辑值的功能

edit
() => void

用于将可编辑设置为编辑模式的功能

区域 ​

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

道具默认值类型
as
'div'
AsTag | Component

此组件应呈现为的元素或组件。 可以被asChild覆盖

asChild
boolean

将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

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

输入 ​

包含可编辑组件的输入。

道具默认值类型
as
'input'
AsTag | Component

此组件应呈现为的元素或组件。 可以被asChild覆盖

asChild
boolean

将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

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

预览 ​

包含可编辑组件的预览。

道具默认值类型
as
'span'
AsTag | Component

此组件应呈现为的元素或组件。 可以被asChild覆盖

asChild
boolean

将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

编辑触发器 ​

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

道具默认值类型
as
'button'
AsTag | Component

此组件应呈现为的元素或组件。 可以被asChild覆盖

asChild
boolean

将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

提交触发器 ​

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

道具默认值类型
as
'button'
AsTag | Component

此组件应呈现为的元素或组件。 可以被asChild覆盖

asChild
boolean

将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

取消触发器 ​

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

道具默认值类型
as
'button'
AsTag | Component

此组件应呈现为的元素或组件。 可以被asChild覆盖

asChild
boolean

将默认呈现的元素更改为作为子元素传递的元素，合并它们的属性和行为。

阅读我们的 组合 指南以了解更多详细信息。

无障碍性 ​

键盘交互 ​

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