对话框 Dialog

自研对话框，<teleport to="body"> 渲染，遮罩点击/右上角 × 关闭。

Props

属性	类型	默认值	说明
modelValue	boolean	false	是否显示（v-model）
title	string	''	标题
width	string | number	'50%'	宽度；数字自动转 px，字符串原样（如 '500px'）

事件

事件	参数	说明
update:modelValue	boolean	关闭（遮罩/×）时触发

Slots

插槽	说明
默认	对话框内容
footer	底部按钮区（有插槽才渲染）

示例

<template>
  <Button @click="visible = true">打开弹窗</Button>
  <Dialog v-model="visible" title="确认操作" width="420px">
    <p>确定要执行该操作吗？</p>
    <template #footer>
      <Button @click="visible = false">取消</Button>
      <Button variant="destructive" @click="confirm">确认</Button>
    </template>
  </Dialog>
</template>