Element message box confirmation message, how to change the location of confirmation and cancellation?

if the, element message box is on the right and canceled on the left, what can I do to make sure that the confirmation is on the left and the cancellation is on the right?
Code:

<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>

effect:

clipboard.png

I tried to change the location of confirmation and cancellation, and then change the style, but make sure that there is an extra class that can be displayed in blue, and there is no way to change the cancellation without the extra class,.

Mar.18,2021

Hello! You can set the class name of the custom cancel button through cancelButtonClass , then float and set the margin.
see codepen example


if I just want to change this box on this page, I usually write a style to overwrite it in style below.

I don't think of any other good method. If you really can't handle it, you can refer to this simple and rude solution, although normally it is not recommended ORZ

.

if changes are needed throughout the project. You can try to modify the source code


the answer is yes!

Menu