element-ui MessageBox弹框确定和取消位置（this.$confirm）

最新推荐文章于 2025-06-11 15:15:59 发布

BigBigHang

最新推荐文章于 2025-06-11 15:15:59 发布

阅读量2.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： css vue elementui 前端

本文链接：https://blog.csdn.net/BigBigHang/article/details/117771010

vue 专栏收录该内容

10 篇文章

订阅专栏

element-ui MessageBox弹框确定和取消位置（this.$confirm）

弹框默认样式为左取消右确认：
在这里插入图片描述
检查样式为：

.el-message-box__btns {
    padding: 5px 15px 0;
    text-align: right;
}

我需要改为左确认右取消，

修改样式为：

.el-message-box__btns {
    padding: 5px 15px 0;
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
}

修改完效果：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

BigBigHang

关注关注

3
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【区分vue2和vue3下的element UI MessageBox 弹框组件，分别详细介绍属性，事件，方法如何使用，并举例】

xiejunlan的博客

06-26

927

在 Vue 2 中，Element UI 提供了MessageBox弹框组件，用于显示消息提示、确认消息和获取用户输入等。而在 Vue 3 的 Element Plus 中，虽然组件和 API 可能有所变化，但基本概念和用法是相似的。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中MessageBox的使用方式。

Element-Ui中MessageBox弹框提交内容与确认消息的使用方法

小柠檬爱编程

12-16

7761

js: mod(row) { this.$prompt("请输入公司名称", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", inputValue: row.company_name, inputPattern: /\S/, inputErrorMessage: "公司名称不能为空" }) .then(({ value..

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

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

12-09

调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title>  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style media="screen" type="text/css"> #appLoading { width: 100%;

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

sinat_34849421的博客

06-11

7077

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

element-MessageBox 弹框组件调整按钮位置（确认在左，取消在右）、删除场景回车调取消事件，默认调确认事件

最新发布

乔的博客

06-11

218

组件默认焦点在确定按钮，尝试改变焦点到取消按钮，结果均无效！只能通过下列方法进行‘拦截’了。

elementUI中的 “this.$confirm“ 基本用法，“this.$confirm“ 调换 “确认“、“取消“ 按钮的位置

sky-stars的博客

12-08

9364

elementUI中的 "this.$confirm" 基本用法，"this.$confirm" 调换 "确认"、"取消" 按钮的位置

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

m0_46315142的博客

07-24

1365

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

Python-定位网页弹框进行取消、确认操作

weixin_37193612的博客

08-29

2018

利用webdriver进行元素定位（1）定位网页页面弹框元素 from selenium import webdriver #载入webdriver driver=webdriver.chorme() #打开chorme浏览器 driver.get('www.http.baidu.com') #打开百度浏览器 driver.find_element_by_css_selector('页面元素‘).click() #定位页面元素 sleep(1) #为了防止网络加载慢，导致弹框无...

Element MessageBox弹框的具体使用

10-15

Element MessageBox是Element UI中的一个弹框组件，用于展示重要信息、询问用户或者接收用户输入等。在标题“Element MessageBox弹框的具体使用”中，主要的知识点包括了Element MessageBox的多种使用场景和对应的...

element-ui组件MessageBox 弹框确认消息报Uncaught (in promise) error

Joker的博客

06-27

1486

问题场景：前端使用vue-admin-teamplate-master搭建，写了删除一行数据的功能，在按钮点击删除后提示删除成功，但是随后先报了绿框提示删除成功，随后弹出红框但是没有提示信息，浏览器F12显示Uncaught (in promise) error。组件地址：element-ui组件地址源码：首先是index.vue页面部分点击事件绑定 //删除的方法 removeDataById(id) { // console.log(id) //调用方法根据id删

element ui this.$confirm

04-28

Element UI 是一套基于 Vue.js 的桌面端...上面的代码中，我们使用了 Element UI 中的 MessageBox.confirm 方法来创建一个弹窗确认框，然后分别定义了确认和取消后的回调函数，最后在这些回调函数中执行相应的操作。

python messagebox弹窗退出_手动关闭elementUI的messageBox

weixin_39524147的博客

11-24

648

看了前面几位老哥的解答，我今天也遇到了这个问题，用了done()还是会弹出来Axios.interceptors.response.use(response => {// token过期if(response.data.code === 401){MessageBox.confirm('token过期，请重新登录', '提示', {confirmButtonText: '确定',type: 'wa...

element-this.$confirm确定-取消位置交换

weixin_45408578的博客

12-30

1321

定义自定义类名 customClass: "close_confirm", //关闭 onClose() { this.$confirm("是否退出程序?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", customClass: "close_confirm", type: "warning", }) .the..

日常使用代码块:elementUImessagex弹窗(确定按钮在左边)

webfullstack的博客

01-14

3107

日常使用代码块备份 this.$confirm('确定删除该条记录吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', customClass: 'confirm-box', type: 'warning' }).then(() => { if(!this.isValidNot0(item.id)){t...

日常开发记录-this.$message,this.$prompt，交换弹窗确定和取消按钮的位置，确定在左，取消在右...

machine_vision123的博客

01-12

468

代码： <template> <el-button type="text" @click="open">点击打开 Message Box</el-button> </template> <script> export default { methods: { open () { this.$confirm...

交换element-ui的MessageBox弹框的确定和取消位置

轻风细雨_林木木

07-16

2904

参考：https://blog.csdn.net/Dg_Zing/article/details/87898715 博主在使用element-ui的MessageBox弹框时发现默认的弹框是取消在前，确定在后，如图所示：设置提交事件的message默认类 //addSubmit会调用MessageBox弹框，cancelButtonClass为取消按钮的自定义类名 addSubmit...