Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

Dialog 弹出一个对话框，适合需要用户交互或确认的场景。

通过 v-model:visible 控制显示/隐藏。支持标题、内容、底部按钮区域。

<template>
  <div>
    <hy-button @click="visible = true">打开 Dialog</hy-button>
    <hy-dialog v-model:visible="visible" title="提示">
      <p>这是对话框内容</p>
    </hy-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
</script>

自定义标题和内容

支持通过 #title 和默认插槽自定义标题和内容区域。

<!-- demo/dialog/Custom.vue -->
<template>
    <div>
        <hy-button type="success" @click="visible = true">自定义内容</hy-button>

        <hy-dialog v-model:visible="visible">
            <template #title>
                <span class="text-red-500 font-bold">⚠️ 自定义标题</span>
            </template>

            <div class="p-4 bg-gray-50 rounded">
                <p>这里是自定义内容区域</p>
                <hy-input v-model="inputValue" placeholder="试试输入点什么" />
            </div>

            <template #footer>
                <hy-button @click="visible = false">关闭</hy-button>
            </template>
        </hy-dialog>
    </div>
</template>

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

const visible = ref(false)
const inputValue = ref('')
</script>

<style scoped>
.text-red-500 {
    color: #ef4444;
}

.font-bold {
    font-weight: bold;
}
</style>

可拖拽对话框

设置 draggable 属性即可启用拖拽功能（默认开启）。

<template>
  <div>
    <hy-button @click="visible = true">打开可拖拽 Dialog</hy-button>
    <hy-dialog v-model:visible="visible" title="可拖拽" draggable>
      <p>试着拖动标题栏</p>
    </hy-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
</script>

自定义底部按钮

通过 #footer 插槽完全自定义底部区域，或使用 confirmButtonText / cancelButtonText 等 props 简单配置。

<template>
    <div>
        <hy-button @click="visible = true">自定义底部</hy-button>
        <hy-dialog v-model:visible="visible" title="操作确认">
            <p>你确定要执行此操作吗？</p>
            <template #footer>
                <hy-button type="danger" @click="handleDelete">删除</hy-button>
                <hy-button @click="visible = false">取消</hy-button>
            </template>
        </hy-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)

function handleDelete() {
    alert('已删除')
    visible.value = false
}
</script>

居中显示

设置 center 属性让对话框垂直水平居中（默认非居中）。

<!-- demo/dialog/Center.vue -->
<template>
    <div>
        <hy-button @click="visible = true">居中对话框</hy-button>

        <hy-dialog v-model:visible="visible" title="居中显示" :center="true">
            <p>对话框已垂直水平居中显示。</p>
            <p>适用于重要提示或全局操作。</p>
        </hy-dialog>
    </div>
</template>

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

const visible = ref(false)
</script>

关闭控制

支持点击遮罩关闭（showClose），或完全禁用关闭（需通过按钮控制）。

<!-- demo/dialog/CloseControl.vue -->
<template>
    <div>
        <hy-button type="info" @click="visible = true">不可关闭对话框</hy-button>

        <hy-dialog v-model:visible="visible" title="重要操作" :show-close="false">
            <p>此对话框不能通过点击遮罩或关闭按钮关闭。</p>
            <p>必须通过底部按钮操作。</p>

            <template #footer>
                <div style="text-align: right">
                    <hy-button type="primary" @click="handleConfirm">我已知晓</hy-button>
                </div>
            </template>
        </hy-dialog>
    </div>
</template>

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

const visible = ref(false)

function handleConfirm() {
    visible.value = false
}
</script>

Dialog API

Props

Name	Description	Type	Default
visible	是否显示 Dialog	`boolean`	`false`
title	Dialog 标题	`string`	`'default title'`
show-close	是否显示关闭按钮	`boolean`	`true`
close-icon	关闭图标名称	`string`	`'xmark'`
confirm-button-text	确认按钮文字	`string`	`'Confirm'`
cancel-button-text	取消按钮文字	`string`	`'Cancel'`
confirm-button-type	确认按钮类型	`string`	`'primary'`
cancel-button-type	取消按钮类型	`string`	`'default'`
center	是否垂直水平居中	`boolean`	`false`
draggable	是否可拖拽	`boolean`	`true`
top	Dialog 距离顶部距离（非居中时）	`string`	`'10px'`

Events

Name	Description	Type
update:visible	Dialog 显示状态更新	`(visible: boolean) => void`
confirm	点击确认按钮时触发	`() => void`
cancel	点击取消按钮时触发	`() => void`
close	Dialog 完全关闭后触发	`() => void`

Slots

Name	Description
default	Dialog 内容区域
title	自定义标题内容
footer	自定义底部按钮区域

Expose

Name	Description	Type
toggleVisible	切换显示/隐藏	`() => void`
open	打开 Dialog	`() => void`
close	关闭 Dialog	`() => void`

Dialog 对话框 ​

基础用法 ​

自定义标题和内容 ​

可拖拽对话框 ​

自定义底部按钮 ​

居中显示 ​

关闭控制 ​

Dialog API ​

Props ​

Events ​

Slots ​

Expose ​