element-ui中的this.$confirm中的message内容和按钮上下调换位置，换一种方法

在Element UI的`this.$confirm`方法中，如果你想改变消息内容和确认/取消按钮的位置，它默认是垂直排列的。然而，element本身并没有提供直接配置来交换这两个元素的位置。不过，你可以通过自定义组件或者使用第三方库来实现这个需求。

一种常见的方式是使用CSS覆盖默认样式。例如，你可以创建一个新的确认弹窗组件，并调整其`.el-message__content`和`.el-dialog-button-row`的布局。以下是一个简单的示例：

<template>
  <el-dialog
    :title="title"
    class="custom-confirm"
    :visible.sync="dialogVisible"
    width="40%"
  >
    <div v-if="buttonPosition === 'top'" class="custom-confirm-buttons">
      <span class="custom-confirm-text">{{ message }}</span>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
    <div v-else class="custom-confirm-buttons">
      {{ message }}
      <el-button type="primary" @click="handleConfirm">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.custom-confirm {
  .custom-confirm-buttons {
    display: flex;
    align-items: {{ buttonPosition === 'top' ? 'flex-end' : 'flex-start' }};
  }
  .custom-confirm-text {
    margin-bottom: {{ buttonPosition === 'top' ? 'auto' : '0' }}; /* 防止文本下移 */
  }
}
</style>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      title: '',
      message: '',
      buttonPosition: 'bottom', // 或者 'top'
    };
  },
  methods: {
    handleConfirm() {
      this.dialogVisible = false;
      // 其他操作...
    },
    handleCancel() {
      this.dialogVisible = false;
      // 其他操作...
    },
  },
};
</script>

在这个例子中，`buttonPosition`属性控制了按钮的位置。当设置为'top'时，按钮会出现在文字的上方；反之，如果设置为'bottom'，则保持默认的底部位置。