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

最新推荐文章于 2025-03-26 11:04:59 发布

Muchen灬

最新推荐文章于 2025-03-26 11:04:59 发布

阅读量3.9k

点赞数 1

文章标签： ui 前端 elementui

本文链接：https://blog.youkuaiyun.com/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内进行全局修改

在这里插入图片描述

效果展示

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Muchen灬

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

python获取单选框的值_WEB自动化(Python+selenium)的API

weixin_39635432的博客

11-19

835

WEB自动化(Python+selenium)的API 在做Web自动化过程中，汇总了Python+selenium的API相关方法，给公司里的同事做了第二次培训，分享给大家。WEB自动化测试培训课程目的一、Webdriver API 的使用课程内容1 控制浏览器Selenium 主要提供的是操作页面上各种元素的方法，但它也提供了操作浏览器本身的方法，比如浏览器的大小以及浏览器后退、前进按钮等。...

Selenium 3.0 + Python自动化测试框架的使用

jogrun的博客

12-05

1788

本文以Python语言为例，主要系统介绍Selenium3.0自动化测试框架的使用中的各种基础、常规操作。通过学习和实践，达到能够在Python + Selenium的技术架构下进行Web自动化入门测试的目的。

1 条评论您还未登录，请先登录后发表或查看评论

修改this.$confirm的按钮位置、图标、文字及标题

qq_71214810的博客

11-20

1836

在Vue.js项目中，this.$confirm通常是基于某些UI库的对话框确认方法... 使用h函数创建的虚拟DOM节点...

elementUI中的$confirm调换两个按钮的位置

程序员一枚，仅记录工作中的难点

07-01

3941

elementUI中的$confirm调换两个按钮的位置

vue+element 使用弹框this.$confirm 区分关闭和取消按钮

最新发布

xixi_666的专栏

03-26

1016

点击按钮，弹出弹窗，要做两个。，要区分开选择和关闭的功能。

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

sinat_34849421的博客

06-11

7057

使用element-ui的MessageBox组件时，用到了$confirm弹出框，它的默认样式时这样子的在项目开发中，为了保持风格的统一，UI给的切图都是确定在左，取消在右，且居中显示，类似这样子的效果。看了下组件的Options参数，无法满足需求，于是琢磨着直接修改样式，直接上代码 .el-message-box__btns { text-align: center; // 交换确定和取消按钮的位置 .el-button:nth-child(1) {

使用ElMessageBox调换取消和确定按钮的位置

m0_46315142的博客

07-24

1227

最近在做项目的时候使用了element-plus的messageBox组件，由于messageBox原始定义的取消按钮在左侧，确定按钮在右侧。不符合日常使用习惯，所以想要更换一下位置。但是官方没有定义怎么更换按钮的位置，所以只能自定义组件的样式。在style中定义下面的代码，实现按钮的位置进行反转，但是这段样式必须写在一个新的<style>标签中！这样就设置好了按钮的位置。但是在完成按钮位置更换以后两个按钮会连在一起，可以绑定一下删除按钮，对删除按钮进行自定义样式，给它挪一下。

Selenium框架的使用

import_Z的博客

09-08

682

什么是Selenium Selenium是一个用于Web应用程序测试的工具。你可以通过在程序中获取前端界面的元素，然后用代码定义输入内容，触发点击事件，模拟鼠标位置等来模拟人在浏览器中的操作过程。在程序中打断点，可以看到每一步的程序操作 Selenium原理及流程 #mermaid-svg-KEQMlBGLeWJdPYun .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill

A002-185-2531

GONGZIXUY的博客

01-05

1582

目录第一页作业 2 1.1验收承认(acceptance) 2 1.2要求需要(requirement) 5 1.3最初形态(Prototype) 6 1.4Model(模型) 7 1.5异义词(Homonym) 8 1.6检查(Inspection) 8 1.7敏捷式项目管理(Agile project management) 9 1.8特征(Feature) 10 1.9实体(Entity) 12 1.10错误(Error) 14 第二页作业 15 2.1实现视图(implementation vie

elementUI vue this.$confirm 和el-dialog 弹出框 移动示例demo

10-16

主要介绍了elementUI vue this.$confirm 和el-dialog 弹出框 移动示例demo，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

oracle erp 表结构

waiwai1015的专栏

09-26

3477

BOM模块常用表结构表名: bom.bom_bill_of_materials 说明: BOM清单父项目 BILL_SEQUENCE_ID NUMBER 清单序号（关键字） ASSEMBLY_ITEM_ID NUMBER 装配件内码 ORGANIZATION_ID NUMBER 组织代码 ASSEMBLY_TYPE NUMBER 装配类别 SPECFIIC_ASSEMBLY_COMMEN...

更改element-ui中MessageBox弹框的确定和取消位置

weixin_44409702的博客

07-15

8166

使用element-ui的MessageBox弹框时发现默认的弹框是取消在前，确定在后，，这和我们平时的大多习惯有点不同，再加上设计师设计的ui图也是取消在后，确定在前，于是要更改下 <el-button type=“text” @click=“open”>点击打开 Message Box 1：在弹出框事件中为取消按钮添加 cancelButtonClass: ‘btn-custom-...

layui 弹层的确定&取消按钮的样式修改为原型

xie17887953486的博客

07-27

1221

btn: ['通过', '驳回'],title: '任务申请',

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

zuo_zuo_blog的博客

09-19

3010

1.学习from https://segmentfault.com/q/1010000015223295 2.如题，element message box 确定在右面，取消在左面，要怎么做才能让确定在左面，取消在右面？代码： <template> <el-button type="text" @click="open">点击打开 Message Box</el...

Easyui $.messager.alert和 $.messager.confirm位置控制

YJ108283的博客

05-03

4844

$.messager.alert({ title:'提示', msg:'操作成功', icon: 'info', width: 200, top:300（用来指定离ale...

element - 如何通过js调用el-confirm组件？

Dark_programmer的博客

09-09

1423

js调用confirm组件

elementui $confirm 确认弹框区分取消操作和关闭操作

weixin_48896647的博客

08-22

1412

例：弹出框需要取消确认关闭三个单独操作流程。可参考 elementui。

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

09-25

在Element UI的`this.$confirm`组件中，`message`属性用于设置确认消息的内容，通常是一个提示用户需要确认的操作的文字描述。默认情况下，这个消息会显示在上方，而两个操作按钮（通常是"确定"和"取消"）会放在下方。如果你想改变它们的位置，让按钮在上、消息在下，你可以通过自定义插槽（slot）来实现。在Vue模板中，可以在`.el-dialog__footer`这一部分添加你的自定义内容，将按钮替换到`.dialog-confirm__buttons`里面，并将确认消息插入到其他地方，例如`.dialog-confirm__message`。这里是一个简单的例子： ```html <template> <div> <el-dialog :visible.sync="dialogVisible" class="custom-confirm-dialog" > <div slot="footer"> <span class="custom-message">{{ message }}</span> <el-button @click="handleCancel">取消</el-button> <el-button type="primary" @click="handleConfirm">确定</el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, message: '这是一条确认信息', }; }, methods: { handleConfirm() { // 确定操作 }, handleCancel() { // 取消操作 }, }, }; </script> <style scoped> .custom-confirm-dialog .dialog-confirm__message { /* 自定义样式 */ display: flex; align-items: center; justify-content: center; } .custom-confirm-dialog .custom-message { /* 将消息移动到原来按钮的位置 */ position: absolute; bottom: 0; } </style> ``` 请注意，你需要根据实际的需求和Element UI的版本调整CSS样式。如果Element UI提供官方支持的自定义布局选项，建议查阅其文档。