交换element-ui的MessageBox弹框的确定和取消位置

博主在使用element-ui的MessageBox弹框时发现默认的弹框是取消在前，确定在后，如图所示：

博主并不喜欢这种样式，博主比较喜欢确定在前，取消在后的样式。于是在网上寻找改变按钮位置的方法，如下：

//按钮点击会触发addSubmit方法
<el-button type="primary" v-show="addOrEdit == 0" @click.native="addSubmit">提交</el-button>

//addSubmit会调用MessageBox弹框，cancelButtonClass为取消按钮的自定义类名
addSubmit(){
...
	this.$confirm("确认提交吗？", "提示", {
		cancelButtonClass: "btn-custom-cancel"
	})
...
}

//设置取消按钮向右浮动，左magin为10px，即与确定按钮间距为10px
.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}

这样，就达到了交换确定和取消按钮的效果，如图所示：