<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 消息提示的简单使用(这个之前已经发布过了)。