elementui confirm
ElementUI Confirm 组件使用指南
ElementUI 的 Confirm 组件用于显示确认对话框，常用于删除操作或其他需要用户确认的场景。以下是几种常见的使用方法。
基本用法
调用 $confirm 方法可以快速弹出确认框：
this.$confirm('确认删除此数据？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 用户点击确定
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
// 用户点击取消
this.$message({
type: 'info',
message: '已取消删除'
});
});自定义选项
可以通过配置对象自定义对话框内容：
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true, // 文字居中
showClose: false // 隐藏关闭按钮
}).then(() => {
// 确认逻辑
});异步关闭
在确认操作需要异步处理时，可以返回 Promise：
this.$confirm('确定提交表单吗？', '提示', {
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
// 模拟异步操作
setTimeout(() => {
done();
instance.confirmButtonLoading = false;
}, 1000);
} else {
done();
}
}
}).then(() => {
// 提交成功逻辑
});全局配置
在 Vue 项目入口文件中可以全局配置 Confirm 的默认行为：
import ElementUI from 'element-ui';
Vue.use(ElementUI, {
size: 'small',
confirmButtonText: 'OK',
cancelButtonText: 'Cancel'
});注意事项
- 确保在 Vue 实例中正确引入 ElementUI 并注册
- 在组件销毁前应处理未完成的确认弹窗
- 移动端使用时可能需要调整样式以适应小屏幕
以上方法覆盖了 ElementUI Confirm 组件的主要使用场景，根据实际需求选择合适的方式即可。
