MessageBox

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息

消息提示

当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

调用 ElMessageBox.alert 方法以打开 alert 框。 它模拟了系统的 alert。

通过title属性设置MessageBox的标题，content设置正文内容，confirmBtnText设置确定按钮的文本内容。 它默认会返回一个Promise对象便于进行后续操作的处理。

<template>
  <el-button @click="showMessageBox">showMessageBox</el-button>
</template>
<script setup>
import ElMessageBox from '@/components/MessageBox/MessageBox'
import ElButton from '@/components/Button/Button.vue'

const showMessageBox = () => {
  ElMessageBox({
    // 确认文字、标题和内容
    confirmBtnText: 'Ok',
    title: 'MessageBox',
    content: 'This is ConfirmMessageBox content'
  }).then(() => {
    console.log('MessageBox resolve')
  }).catch(() => {
    console.log('MessageBox reject')
  })
}
</script>

确认消息

提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框

调用 ElMessageBox.confirm 方法以打开 confirm 框。它模拟了系统的 confirm。

showCancelBtn设置是否显示取消按钮和cancelBtnText设置取消按钮的文本内容。

<template>

    <el-button @click="showConfirmMessageBox" type="danger">ConfirmMessageBox</el-button>
</template>
<script setup>
import ElMessageBox from '@/components/MessageBox/MessageBox'
import ElButton from '@/components/Button/Button.vue'

const showConfirmMessageBox = () => {
  ElMessageBox.confirm({
    showCancelBtn: true,
    confirmBtnText: '确定',
    cancelBtnText: '取消',
    title: 'ConfirmMessageBox',
    content: 'This is ConfirmMessageBox content'
  }).then(() => {
    console.log('ConfirmMessageBox resolve')
  }).catch(() => {
    console.log('ConfirmMessageBox reject')
  })
}
</script>