对话框 Dialog

对应 Arco Modal，默认标题靠左，center 对应居中标题与按钮。 属性用法见 Element Plus 文档。

基础对话框

点击按钮打开对话框，取消、确认和关闭按钮均可关闭。

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <el-button type="primary" @click="open = true">Open dialog</el-button>
  <el-dialog v-model="open" title="Project settings" >
    Review the changes before continuing.
    <template #footer>
      <el-button @click="open = false">Cancel</el-button>
      <el-button type="primary" @click="open = false">Confirm</el-button>
    </template>
  </el-dialog>
</template>

居中对话框

center 配合 align-center 居中标题、按钮与弹窗位置。

<script setup lang="ts">
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <el-button type="primary" @click="open = true">Open centered dialog</el-button>
  <el-dialog v-model="open" title="Project settings" center align-center>
    Review the changes before continuing.
    <template #footer>
      <el-button @click="open = false">Cancel</el-button>
      <el-button type="primary" @click="open = false">Confirm</el-button>
    </template>
  </el-dialog>
</template>

与 Arco 的差异

• 默认保留 Element Plus 的顶部距离；align-center 可实现 Arco 默认的垂直居中。