消息弹框 MessageBox

对应 Arco Modal.confirm 场景，center: true 对应 simple 的居中标题与按钮。 属性用法见 Element Plus 文档。

提示、确认与输入

点击按钮分别打开 alert、confirm、prompt，取消操作会显示结果。

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
const status = ref('')
// Cancel and close reject the promise; rethrow anything else.
async function open(mode: 'alert' | 'confirm' | 'prompt') {
  const options = { confirmButtonText: 'Confirm', cancelButtonText: 'Cancel' }
  try {
    if (mode === 'prompt') {
      const { value } = await ElMessageBox.prompt('Review your project settings.', 'Project settings', {
        ...options, inputPlaceholder: 'Project name', inputValidator: (value: string) => !!value.trim() || 'Please enter a name',
      })
      status.value = 'Entered: ' + value
    } else {
      await ElMessageBox[mode]('Review your project settings.', 'Project settings', options)
      status.value = 'Confirmed'
    }
  } catch (action) {
    if (action !== 'cancel' && action !== 'close') throw action
    status.value = 'Cancelled'
  }
}
</script>

<template>
  <el-button @click="open('alert')">Alert</el-button>
  <el-button @click="open('confirm')">Confirm</el-button>
  <el-button @click="open('prompt')">Prompt</el-button>
  <el-text aria-live="polite">{{ status }}</el-text>
</template>

居中确认

center: true 对齐 Arco simple 场景，取消与确认保留正常行为。

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
const status = ref('')
// Cancel and close reject the promise; rethrow anything else.
async function open() {
  try {
    await ElMessageBox.confirm('Publish this project?', 'Publish project', { center: true, type: 'warning', confirmButtonText: 'Publish', cancelButtonText: 'Cancel' })
    status.value = 'Published'
  } catch (action) {
    if (action !== 'cancel' && action !== 'close') throw action
    status.value = 'Cancelled'
  }
}
</script>

<template>
  <el-button @click="open">Open centered confirmation</el-button>
  <el-text aria-live="polite">{{ status }}</el-text>
</template>

与 Arco 的差异

• 默认显示关闭按钮，Arco simple 默认没有；默认形态保留 Element Plus 对齐方式。