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

1.学习from

https://segmentfault.com/q/1010000015223295

2.如题，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>

3.解决办法
可以通过cancelButtonClass设置自定义取消按钮的类名，然后浮动、设置边距即可
https://codepen.io/cnjs/pen/aKBWqv

var Main = {
    data() {
      return {
        value: ''
      }
    },
    methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          cancelButtonClass: 'btn-custom-cancel',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#  app')

4.重新定义css

.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}

5.实例：