首先，确保你已经在项目中引入了 Element Plus。如果没有，你可以通过以下方式安装：
npm install element-plus
然后，在你的 Vue 组件中使用 el-messagebox：
<template>
<div>
<el-button @click="showMessageBox">显示确认框</el-button>
</div>
</template>
<script>
import { ElButton, ElMessageBox } from 'element-plus';
export default {
components: {
ElButton,
},
methods: {
showMessageBox() {
ElMessageBox.confirm('确定要执行这个操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
this.$message.success('操作成功！');
})
.catch(() => {
this.$message.info('取消操作');
});
},
},
};
</script>
在这个例子中，我们使用了 el-button 组件来触发显示确认框。通过点击按钮，调用 ElMessageBox.confirm 方法来显示一个确认框。这个方法接受三个参数：
1. 提示的文本内容。
2. 提示框的标题。
3. 配置对象，包含确认按钮文本、取消按钮文本、弹框类型等信息。
通过 then 和 catch 来处理用户点击确认和取消按钮后的逻辑。
你可以根据实际需求调整弹框组件的样式和配置。el-messagebox 还提供了其他类型的弹框，如 ElMessageBox.alert、ElMessageBox.prompt 等，可以根据需要选择不同的弹框类型。
转载请注明出处：http://www.zyzy.cn/article/detail/5564/ElementPlus