MessageBox

Covers Arco Modal.confirm; center: true matches the simple modal's centered title and actions. See the Element Plus docs for props.

Alert, Confirm & Prompt

Open alert, confirm or prompt dialogs; cancellation is shown as a result.

<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>

Centered Confirmation

Center: true matches Arco's simple modal while keeping normal confirmation and cancellation.

<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>

Differences from Arco

• A close button is shown by default, unlike Arco simple; the default layout keeps Element Plus alignment.