element-ui中$confirm弹出框的确定和取消按钮互换位置

Muchen灬

于 2023-04-13 16:37:36 发布

阅读量3.9k

点赞数 1

文章标签： ui 前端 elementui

本文链接：https://blog.csdn.net/qq_40976321/article/details/130133720

版权

通过修改element-ui的样式类，利用flex布局的row-reverse属性实现$confirm弹出框中确认和取消按钮的位置互换。在app.vue全局文件中进行调整，设置按钮的margin-left以完善布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui中$confirm弹出框的确定和取消按钮互换位置

（1）定位元素
（2）找到元素class，通过flex布局，进行位置更换
（3）app.vue中进行全局修改

在这里插入图片描述

/* 确认窗 取消确认按钮位置更换 */
.el-message-box__wrapper .el-message-box__btns {
  display: flex;
  flex-flow: row-reverse;
}

.el-message-box__wrapper .el-message-box__btns .el-button {
  margin-left: 10px;
}

APP.vue内进行全局修改

在这里插入图片描述

效果展示

在这里插入图片描述