element message box 确认消息，怎么改变确定和取消的位置？

Question

如题，element message box 确定在右面，取消在左面，要怎么做才能让确定在左面，取消在右面？
代码：

<template>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    }
  }
</script>

效果：

我试过把确认和取消的位置换了，再改style，但是确认有一个额外的class可以显示成蓝色，取消没有额外的class，没有办法改。。。

Answer 1

你好！可以通过cancelButtonClass设置自定义取消按钮的类名，然后浮动、设置边距即可。
见codepen示例

Answer 2

如果只是要改这个页面的这个框的话，我一般是直接下边 style 里写个样式覆盖掉 ...

我没想到有什么其他的好方法，如果实在搞不定可以参考一下这个简单粗暴的解决方式，虽然正常来讲是不推荐的 ORZ

Answer 3

如果整个项目里面都需要改的话....可以尝试一下修改源码

Answer 4

这答案可以！！