首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：
npm install element-react
# 或
yarn add element-react
然后，在你的 Vue 组件中，可以这样使用 MessageBox：
<template>
<div>
<h3>Element-React MessageBox 弹框</h3>
<el-button @click="showMessageBox">显示弹框</el-button>
</div>
</template>
<script>
import { ElButton, ElMessageBox } from 'element-react';
export default {
components: {
ElButton,
},
methods: {
showMessageBox() {
ElMessageBox.confirm('确定执行该操作吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning', // 或 'info'、'success'、'error'
}).then(() => {
// 用户点击确定按钮时的逻辑
ElMessageBox.alert('操作成功', '提示', {
confirmButtonText: '知道了',
});
}).catch(() => {
// 用户点击取消按钮时的逻辑
ElMessageBox.alert('取消操作', '提示', {
confirmButtonText: '知道了',
});
});
},
},
};
</script>
在这个例子中，我们引入了 Element-React 的 ElButton 和 ElMessageBox 组件，并在模板中使用它们。通过调用 ElMessageBox.confirm 方法，可以显示一个带有确认和取消按钮的弹框。你可以根据实际需求设置弹框的标题、内容、按钮文字等。
在 type 属性中，可以设置为 'warning'、'info'、'success'、'error' 中的任意一个，以显示不同类型的弹框。
请参考 Element-React 的官方文档：[Element-React MessageBox](https://element-plus.org/#/en-US/component/message-box) 以获取更多详细信息和选项。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5625/Element-React