使用方法

不用自己管「开没开」这个状态，就能弹出对话框。调 dialog.show(content, options) 打开，调 dialog.hide() 关掉。把 dialog.Host 在模板里渲染一次即可。content 是个返回 VNode 的函数，所以写成 () => h(内容组件)。

import { useImperativeDialog } from '@astryx-vue/core/Dialog'

<script setup lang="ts">
import { DialogHeader, useImperativeDialog } from '@astryx-vue/core/Dialog'
import { h } from 'vue'

const dialog = useImperativeDialog({ width: 400 })
const DialogHost = dialog.Host

function askToDelete(): void {
  dialog.show(
    () => h(DialogHeader, { title: '删除项目？', hasCloseButton: true }),
    { purpose: 'form' },
  )
}
</script>

<template>
  <button type="button" @click="askToDelete">
    删除项目
  </button>
  <DialogHost />
</template>

示例

常见配置、变体和状态。

Dialog — 确认

Delete project?

This will permanently delete "Marketing Dashboard" and all of its data. This action cannot be undone.

做不可逆的操作前，先让用户确认。删除项目、移除成员、吊销 API key 这类事都该这么做。

Dialog — 表单

Edit profile

Update your display name and bio

Display name

Bio

Design systems engineer

不离开当前页面就收集用户输入。purpose 用 form，点遮罩不会关掉。适合改个人资料、新建条目、就地改设置。

Dialog — 必须响应

Transfer project ownership

This action requires confirmation from the new owner

You are about to transfer "Marketing Dashboard" to Sarah Chen. Once accepted, you will lose admin access.

Escape 和点遮罩都关不掉，用户必须明确选一个动作。purpose 用 required。适合转移所有权、法律确认，以及不能跳过的关键决定。

Dialog — 可滚动

Terms and Conditions

1. You agree to use the service only for lawful purposes and in compliance with all applicable laws and regulations in your jurisdiction.2. Your account credentials are your responsibility. Notify us immediately if you suspect unauthorized access to your account.3. We reserve the right to suspend accounts that violate these terms or engage in abusive behavior toward other users.4. Content you upload remains your property. You grant us a license to host and display it within the service.5. We may update these terms at any time. Continued use after changes constitutes acceptance of the updated terms.6. The service is provided as-is without warranties of any kind. We are not liable for data loss or service interruptions.7. You may cancel your account at any time. Your data will be deleted within 30 days of cancellation.8. Disputes will be resolved through binding arbitration in accordance with applicable regulations.9. You agree not to reverse-engineer, decompile, or disassemble any part of the service or its underlying technology.10. We may collect anonymized usage data to improve the service. Personal data is handled per our Privacy Policy.11. Third-party integrations are governed by their own terms. We are not responsible for third-party service outages.12. You are responsible for maintaining backups of your data. We provide export tools but do not guarantee data recovery.13. Commercial use requires a Business plan. Free accounts are limited to personal and non-commercial projects.14. We may introduce new features or discontinue existing ones with 30 days notice via email or in-app notification.15. Violation of these terms may result in immediate termination of your account without prior notice or refund.

限制对话框高度，内容超出时在框内滚动。适合条款、许可协议、更新日志，以及任何要用户读完再接受的长文。