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

默认

 改为:

 添加样式即可:

//交换element-ui中$confirm弹出框的确定和取消按钮位置。确定在前,取消在后
.el-message-box__btns {
  padding: 5px 15px 0;
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
}

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提供官方支持的自定义布局选项,建议查阅其文档。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值