Element UI 中 ElMessageBox.confirm 按钮样式定制指南

Element UI 中 ElMessageBox.confirm 按钮样式定制指南

想要改变 ElMessageBox.confirm 按钮的样式，你可以通过以下三种方法实现：

1. 使用内联样式

在调用 ElMessageBox.confirm 方法时，通过传递一个 options 对象，其中包含一个 'buttonClass' 属性来指定按钮的样式类。例如：

ElMessageBox.confirm('确认删除该项？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  buttonClass: 'my-confirm-button' // 自定义的按钮样式类
});

然后在 CSS 中定义 'my-confirm-button' 样式类的样式：

.my-confirm-button {
  background-color: #f00;
  color: #fff;
  /* 其他样式属性 */
}

2. 使用全局样式

在全局的 CSS 中定义 ElMessageBox.confirm 按钮的样式类。例如：

.el-message-box__btns .el-button--primary {
  background-color: #f00;
  color: #fff;
  /* 其他样式属性 */
}

这样所有 ElMessageBox.confirm 按钮都会应用该样式类。

3. 使用自定义主题

如果你正在使用 Element UI 的自定义主题，可以通过修改主题样式来改变 ElMessageBox.confirm 按钮的样式。请参考 Element UI 官方文档中关于自定义主题的说明。