Dialog - 对话框

Demo

更新日期

2026-09-25 UTC

dialog/demo.vue

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <YlfDialog
    v-model:open="open"
    title="云端之上"
    description="这是一个基于 reka-ui 的对话框：自带遮罩、焦点陷阱、ESC / 点击外部关闭、滚动锁与 aria 关联。"
  >
    <template #trigger>
      <YlfButton variant="primary">
        打开对话框
      </YlfButton>
    </template>

    <div class="flex flex-col gap-4">
      <p class="text-sm">
        行为由 reka-ui 提供，皮肤是云乐坊 token —— 试试按 <kbd>Esc</kbd> 或点击遮罩关闭。
      </p>
      <div class="flex justify-end gap-2">
        <YlfButton variant="secondary" size="sm" @click="open = false">
          取消
        </YlfButton>
        <YlfButton variant="primary" size="sm" @click="open = false">
          确定
        </YlfButton>
      </div>
    </div>
  </YlfDialog>
</template>

对话框：行为与可访问性全部基于 reka-ui（遮罩、焦点陷阱、Esc / 点击外部关闭、滚动锁、aria-labelledby / aria-describedby），外观使用共享主题 token。

Props

属性	说明	类型	默认值
v-model:open	显隐状态	boolean	false
title	可见标题	string	—
description	描述	string	—
accessibleTitle	无可见标题时供辅助技术读取的标题	string	'对话框'

建议始终提供 title。只有视觉设计明确隐藏标题时，才改用描述场景的 accessible-title。

Registry

Dialog 可通过 Registry 分发复制源码；安装时会自动带入 reka-ui、Sass 与共享 token。

Slots

名称	说明
trigger	触发器（as-child，把行为透传给你的按钮）
title	自定义标题
description	自定义描述
default	正文内容