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

1.学习from

https://segmentfault.com/q/1010000015223295

2.如题，element message box 确定在右面，取消在左面，要怎么做才能让确定在左面，取消在右面？
代码：

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

3.解决办法
可以通过cancelButtonClass设置自定义取消按钮的类名，然后浮动、设置边距即可
https://codepen.io/cnjs/pen/aKBWqv

var Main = {data() {return {value: ''}},methods: {open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {cancelButtonClass: 'btn-custom-cancel',confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });}}}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#  app')

4.重新定义css

.btn-custom-cancel {float: right;margin-left: 10px;
}

5.实例：

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

message box确认弹框确认和取消按钮颜色互换
一.elementui中标准的样式如下图所示二.现在有个需求想要做成如下所示的弹框,因为强制删除不可逆,所以希望用户谨慎考虑删除操作,所以就希望取消和确认颜色互换. 三.话不多说上代码 this.$ ...
mint-ui message box confirm弹框确认和取消按钮的回调
调用mint-ui message box confirm方法后点击确认和取消后如何执行对应的回调函数 MessageBox.confirm('', { message: 'xxx,你确定?', ...
Net中使用 RabbitMq | Confirm确认消息
RabbitMQ 消息确认机制 - 消费者确认由于生产者和消费者不直接通信,生产者只负责把消息发送到队列,消费者只负责从队列获取消息(不管是push还是pull). 消息被"消费&quo ...
MessageBox 弹框消息提示、确认消息
type 消息类型,用于显示图标 success / info / warning / error 1.消息提示 this.$alert('这是一段内容', '标题名称', {confirmButto ...
老的消息中间件投递失败的类型值_RabbitMQ消息中间件技术精讲11 高级篇四 confirm 确认消息...
RabbitMQ消息中间件技术精讲11 高级篇四 confirm 确认消息理解Confirm消息确认机制: 消息的确认,是指生产者投递消息后,如果broker收到消息,则会给生产者一个应答: 生产者 ...
RabbitMQ 入门：1. Message Broker（消息代理）
Message Broker(消息代理) 维基百科对 Message Broker 的定义是:Message broker是一种中介程序模块,它把消息从发送方的正式消息传递协议转化为接收方的正式消息传 ...
element若依菜单点击改变背景色
element&若依菜单点击改变背景色 element只提供了激活时候改变字体的颜色找到激活的菜单查看代码从#app开始的,只能整个复写,加上激活的class: is-active &l ...
elementui确认消息区分取消和关闭按钮
默认情况下,elementui的确认消息,取消按钮和右上角弹窗,走的是同一个方法,也就是catch方法的回调,如果功能上需要做区分,就没法区分了. 所以,要解决这个问题,就需要在取消的回调方法里做一个 ...
Mqtt Will Message（遗嘱消息）
LWT 全称为 Last Will and Testament,也就是我们在连接到 Broker 时提到的遗嘱,包括遗嘱Topic.遗嘱 QoS.遗嘱消息等. 顾名思义,当 Broker 检测到 Cl ...

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

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

最新文章

热门文章