使用ElMessageBox调换取消和确定按钮的位置

最近在做项目的时候使用了element-plus的messageBox组件，由于messageBox原始定义的取消按钮在左侧，确定按钮在右侧。不符合日常使用习惯，所以想要更换一下位置。但是官方没有定义怎么更换按钮的位置，所以只能自定义组件的样式。

 

下面是解决方法：

        在style中定义下面的代码，实现按钮的位置进行反转，但是这段样式必须写在一个新的<style>标签中！！！！。这样就设置好了按钮的位置。

<style>
.CancelBtn{
  margin-left: 10px;
}
.el-message-box .el-message-box__btns{
  flex-direction: row-reverse!important;
  justify-content: normal !important;
}
</style>

         但是在完成按钮位置更换以后两个按钮会连在一起，可以绑定一下删除按钮，对删除按钮进行自定义样式，给它挪一下。

ElMessageBox.confirm(
    '确认删除此条记录吗?',
    'Warning',
    {
      cancelButtonClass:"CancelBtn",
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )