当前位置：首页 > 前端教程

elementui deletetip

2026-01-15 20:44:05前端教程

删除确认提示（DeleteTip）的实现方法

在Element UI中实现删除确认提示通常使用ElMessageBox组件，结合自定义样式或逻辑完成。以下是几种常见实现方式：

基础确认弹窗

this.$confirm('确认删除该数据?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  // 删除操作逻辑
  this.$message({ type: 'success', message: '删除成功' });
}).catch(() => {
  this.$message({ type: 'info', message: '已取消删除' }); 
});

自定义HTML内容的删除提示

this.$confirm(
  '<strong style="color:red">该操作不可撤销</strong>', 
  '确认删除', 
  {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '永久删除',
    cancelButtonText: '再想想',
    customClass: 'custom-delete-message'
  }
)

全局配置方法（main.js）

Vue.prototype.$deleteTip = function(message = '确认删除？', title = '警告') {
  return this.$confirm(message, title, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'error',
    lockScroll: false
  })
}
// 组件内调用：this.$deleteTip().then(...)

带输入验证的删除确认

this.$prompt('请输入"DELETE"确认删除', '操作确认', {
  inputPattern: /^DELETE$/,
  inputErrorMessage: '输入内容不匹配',
  confirmButtonClass: 'el-button--danger'
}).then(() => {
  // 执行删除
})

样式自定义方法

通过CSS覆盖默认样式：

elementui deletetip

.el-message-box__wrapper .el-message-box {
  width: 400px;
}
.el-message-box__title {
  color: #F56C6C;
}
.custom-delete-message .el-message-box__content {
  padding: 20px;
}