Element-plus之 MessageBox 消息弹框的简单使用

<template>
    <el-button plain @click="open">点击打开消息弹出框</el-button>
</template>

<script setup>
//第一步：导入消息提示、消息弹出框
import { ElMessage, ElMessageBox } from 'element-plus'

//第二步：将编写按钮的点击事件
const open = () => {
  //第三步：这些代码是从element-plus组件库直接复制的（提示信息可以改成中文）
  ElMessageBox.confirm(
    '确定要...吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    //-：点击“确定”后，会走这个函数
    .then(() => {
      //-：弹出成功提示
      ElMessage({
        type: 'success',
        message: '操作成功',
      })
    })
    //-：点击“取消”后，会走这个函数
    .catch(() => {
      //-：弹出取消提示
      ElMessage({
        type: 'info',
        message: '您已取消',
      })
    })
}
</script>

<style scoped>

</style>

运行效果如下：

以上就是MessageBox 消息弹框的简单使用，也涉及到Message 消息提示的简单使用（这个之前已经发布过了）。