大家好，我是陆砚码。在使用element-ui的MessageBox弹框时，是不是发现默认的弹框是取消在前，确定在后，和我们平时的习惯有点不一样呢？今天就来教大家怎么调整这个顺序，让弹框的UI更符合设计师的图稿。
调整MessageBox弹框的确定和取消按钮位置
首先，我们需要在弹出框的事件中为取消按钮添加一个自定义类名：
点击打开 Message Box
open () {
this.$message({
type: 'success',
message: '删除成功!'
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
然后，我们为这个取消按钮添加样式，将其调整到右边：
.btn-custom-cancel {
float: right;
margin-left: 10px;
}注意，如果你需要更改样式，记得要去掉scoped属性，这样样式才会生效。
小结与拓展
好了，今天的内容就到这里。通过调整类名和样式，我们成功地将element-ui中MessageBox弹框的确定和取消按钮位置进行了调整。如果你对element-ui还有其他疑问，欢迎访问我们的网站思享编程网（www.sxgpb.com）了解更多内容。
我是陆砚码，我们下期再见！