elementUI中的$confirm调换两个按钮位置的实例代码
更新时间：2024年03月12日 10:56:40 作者：zj_zjk_sjz
这篇文章主要介绍了elementUI中的$confirm调换两个按钮位置的实例代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
$confirm默认两个按钮的位置为：取消在前，确认在后，而我们在项目中经常要求：确认在前，取消在后，所以需要调换两个按钮的位置。修改后的样式如下图所示：
1.设置样式代码。
注意：如果放到公共样式文件里,第一种写法；
如果放到vue文件的局部样式中，第二种写法，需要在样式前边加深度作用选择器（/deep/…）)
<style>
/*调换两个按钮的位置*/
.el-message-box__btns{
display:flex;
flex-direction:row-reverse;
}
/*拉开两个按钮的距离10像素，给取消按钮10像素的左margin。*/
.custom-cancel-button{
margin-left:10px;
}
</style><style scoped>
/*调换两个按钮的位置*/
/deep/ .el-message-box__btns{
display:flex;
flex-direction:row-reverse;
}
/*拉开两个按钮的距离10像素，给取消按钮10像素的左margin。*/
.custom-cancel-button{
margin-left:10px;
}
</style>2.给取消按钮添加样式
<style scoped>
/*调换两个按钮的位置*/
/deep/ .el-message-box__btns{
display:flex;
flex-direction:row-reverse;
}
/*拉开两个按钮的距离10像素，给取消按钮10像素的左margin。*/
.custom-cancel-button{
margin-left:10px;
}
</style>两个按钮位置改变完成。注意，$confirm在项目中应用较多，尤其是后台管理系统，删除时的提示都用这个，所以两个样式的修改最好放到公共样式文件里，这样就不需要每次使用时都改一遍样式了。
到此这篇关于elementUI中的$confirm调换两个按钮的位置的文章就介绍到这了,更多相关elementUI $confirm调换按钮位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
为了快速体验 MVVM 模式，我选择了非工程化方式来起步，并选择使用 Vue.js，以及基于它构建的 iView UI 框架。本文给大家分享基于 Vue.js 之 iView UI 框架非工程化实践记录，需要的朋友参考下吧2017-11-11
这篇文章主要为大家详细介绍了Vue中用JSON实现刷新界面不影响倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了如何在 Vue 3 中生成动态的 Word 文档,在开发过程中遇到一个需求,动态生成一个word报表,当时考虑了是前端做还是后端做的问题,最后发现两个解决需求的方法都大差不差,但考虑到前端少发一个请求,就此使用的前端来解决,需要的朋友可以参考下2024-09-09
本文主要介绍了vue中watch监听不到变化的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了vue 如何将二维数组转化为一维数组，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本篇文章给大家分享了关于vue的diff算法的相关知识点总结，有兴趣的朋友参考学习下。2018-03-03
这篇文章主要为大家介绍了Vue响应式系统的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
最近在学习Vue教程,下面这篇文章主要给大家介绍了关于vue中api统一管理的那些事,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了vue如何使用pdf-dist实现pdf预览以及水印添加的功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
详解vue3.0 的 Composition API 的一种使用方法
这篇文章主要介绍了vue3.0 的 Composition API 的一种使用方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
最新评论