Dialog - 对话框

更新日期

2026-10-04 UTC

Demo

dialog/demo.vue

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

const open = ref(false)
const saved = ref(false)

function saveWork() {
  saved.value = true
  open.value = false
}
</script>

<template>
  <YlfDialog
    v-model:open="open"
    title="云端之上"
    description="给灵感一个安心的落点。保存这份作品，下次从这里继续。"
  >
    <template #trigger>
      <YlfButton variant="primary">
        <template #icon>
          <svg class="dialog-demo__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
            <path d="M7 18a5 5 0 0 1-.5-10 6 6 0 0 1 11.4 1.5A4.3 4.3 0 0 1 18 18H7Z" />
          </svg>
        </template>
        打开对话框
      </YlfButton>
    </template>

    <div class="dialog-demo__work">
      <div class="dialog-demo__thumbnail" aria-hidden="true">
        <svg viewBox="0 0 80 64" fill="none">
          <circle cx="53" cy="20" r="10" fill="var(--ylf-accent-sun)" />
          <path d="M16 47a11 11 0 0 1 3-22 15 15 0 0 1 28 6 9 9 0 0 1 1 18H16Z" fill="var(--ylf-c-surface)" stroke="var(--ylf-c-border)" />
        </svg>
      </div>
      <div class="dialog-demo__work-copy">
        <strong>一朵云的灵感</strong>
        <span>创作草稿 · 刚刚编辑</span>
      </div>
      <YlfBadge variant="featured">
        原创
      </YlfBadge>
    </div>

    <div class="dialog-demo__destination">
      <svg class="dialog-demo__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
        <path d="M7 18a5 5 0 0 1-.5-10 6 6 0 0 1 11.4 1.5A4.3 4.3 0 0 1 18 18H7Z" />
      </svg>
      <div><strong>我的云端空间</strong><span>自动同步到你的设备</span></div>
      <svg class="dialog-demo__icon dialog-demo__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m5 12 4 4L19 6" /></svg>
    </div>

    <div class="dialog-demo__actions">
      <YlfButton variant="secondary" @click="open = false">
        再想想
      </YlfButton>
      <YlfButton variant="primary" @click="saveWork">
        保存到云端
      </YlfButton>
    </div>
  </YlfDialog>
  <p v-if="saved" class="dialog-demo__saved" role="status">
    作品已保存到云端，可以安心继续创作。
  </p>
</template>

<style scoped>
.dialog-demo__icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.dialog-demo__work {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--ylf-c-border);
  border-radius: var(--ylf-radius);
  background: var(--ylf-c-surface-raised);
  box-shadow: var(--ylf-shadow-control);
}
.dialog-demo__thumbnail {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 12px;
  background: var(--ylf-c-sky);
  overflow: hidden;
}
.dialog-demo__thumbnail svg {
  width: 100%;
  height: 100%;
}
.dialog-demo__work-copy {
  display: grid;
  flex: 1;
  gap: 5px;
  min-width: 0;
}
.dialog-demo__work strong,
.dialog-demo__destination strong {
  font-size: 14px;
  font-weight: 600;
}
.dialog-demo__work-copy span,
.dialog-demo__destination span {
  font-size: 12px;
  color: var(--ylf-c-text-2);
  line-height: 1.6;
}
.dialog-demo__destination {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 4px;
  color: var(--ylf-c-brand);
}
.dialog-demo__destination > div {
  display: grid;
  flex: 1;
  gap: 4px;
}
.dialog-demo__destination strong {
  color: var(--ylf-c-text);
}
.dialog-demo__check {
  width: 18px;
}
.dialog-demo__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--ylf-c-border);
}
.dialog-demo__saved {
  margin: 18px 0 0;
  color: var(--ylf-c-text-2);
  font-size: 14px;
}
@media (max-width: 400px) {
  .dialog-demo__work {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px 12px;
  }
  .dialog-demo__thumbnail {
    width: 52px;
    height: 52px;
  }
  .dialog-demo__work :deep(.ylf-badge) {
    grid-column: 2;
    justify-self: start;
  }
  .dialog-demo__thumbnail {
    grid-row: 1 / 3;
  }
  .dialog-demo__actions :deep(.ylf-button) {
    padding-inline: 18px;
  }
}
</style>

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

Props

属性	说明	类型	默认值
v-model:open	显隐状态	boolean	false
title	可见标题	string	—
description	描述	string	—
accessibleTitle	无可见标题时供辅助技术读取的标题	string	'对话框'
closeLabel	关闭按钮的无障碍名称，可随正文翻译	string	'关闭'
portalTo	已存在的主题内浮层容器	string | HTMLElement	ConfigProvider / body

英文界面可设置 close-label="Close"，让关闭按钮与正文语言一致。

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

class、id、data-* 和事件传给对话框内容；显式的 aria-describedby 可关联调用方的说明。焦点陷阱、Escape 关闭和关闭后回到触发器仍由 Reka UI 管理。局部主题中把 portal-to 指向同一主题边界内的容器。长标题会换行并为关闭按钮保留空间。

Registry

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

Slots

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