elementUI中的$confirm調(diào)換兩個按鈕位置的實例代碼
更新時間：2024年03月12日 10:56:40 作者：zj_zjk_sjz
這篇文章主要介紹了elementUI中的$confirm調(diào)換兩個按鈕位置的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
$confirm默認(rèn)兩個按鈕的位置為：取消在前，確認(rèn)在后，而我們在項目中經(jīng)常要求：確認(rèn)在前，取消在后，所以需要調(diào)換兩個按鈕的位置。修改后的樣式如下圖所示：
1.設(shè)置樣式代碼。
注意：如果放到公共樣式文件里,第一種寫法；
如果放到vue文件的局部樣式中，第二種寫法，需要在樣式前邊加深度作用選擇器（/deep/…）)
<style>
/*調(diào)換兩個按鈕的位置*/
.el-message-box__btns{
display:flex;
flex-direction:row-reverse;
}
/*拉開兩個按鈕的距離10像素，給取消按鈕10像素的左margin。*/
.custom-cancel-button{
margin-left:10px;
}
</style><style scoped>
/*調(diào)換兩個按鈕的位置*/
/deep/ .el-message-box__btns{
display:flex;
flex-direction:row-reverse;
}
/*拉開兩個按鈕的距離10像素，給取消按鈕10像素的左margin。*/
.custom-cancel-button{
margin-left:10px;
}
</style>2.給取消按鈕添加樣式
<style scoped>
/*調(diào)換兩個按鈕的位置*/
/deep/ .el-message-box__btns{
display:flex;
flex-direction:row-reverse;
}
/*拉開兩個按鈕的距離10像素，給取消按鈕10像素的左margin。*/
.custom-cancel-button{
margin-left:10px;
}
</style>兩個按鈕位置改變完成。注意，$confirm在項目中應(yīng)用較多，尤其是后臺管理系統(tǒng)，刪除時的提示都用這個，所以兩個樣式的修改最好放到公共樣式文件里，這樣就不需要每次使用時都改一遍樣式了。
到此這篇關(guān)于elementUI中的$confirm調(diào)換兩個按鈕的位置的文章就介紹到這了,更多相關(guān)elementUI $confirm調(diào)換按鈕位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于 Vue.js 之 iView UI 框架非工程化實踐記錄(推薦)
為了快速體驗 MVVM 模式，我選擇了非工程化方式來起步，并選擇使用 Vue.js，以及基于它構(gòu)建的 iView UI 框架。本文給大家分享基于 Vue.js 之 iView UI 框架非工程化實踐記錄，需要的朋友參考下吧2017-11-11
這篇文章主要為大家詳細(xì)介紹了Vue中用JSON實現(xiàn)刷新界面不影響倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了如何在 Vue 3 中生成動態(tài)的 Word 文檔,在開發(fā)過程中遇到一個需求,動態(tài)生成一個word報表,當(dāng)時考慮了是前端做還是后端做的問題,最后發(fā)現(xiàn)兩個解決需求的方法都大差不差,但考慮到前端少發(fā)一個請求,就此使用的前端來解決,需要的朋友可以參考下2024-09-09
本文主要介紹了vue中watch監(jiān)聽不到變化的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章給大家分享了關(guān)于vue的diff算法的相關(guān)知識點總結(jié)，有興趣的朋友參考學(xué)習(xí)下。2018-03-03
這篇文章主要為大家介紹了Vue響應(yīng)式系統(tǒng)的原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
最近在學(xué)習(xí)Vue教程,下面這篇文章主要給大家介紹了關(guān)于vue中api統(tǒng)一管理的那些事,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-04-04
vue使用pdf-dist實現(xiàn)pdf預(yù)覽以及水印添加
這篇文章主要為大家詳細(xì)介紹了vue如何使用pdf-dist實現(xiàn)pdf預(yù)覽以及水印添加的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
詳解vue3.0 的 Composition API 的一種使用方法
這篇文章主要介紹了vue3.0 的 Composition API 的一種使用方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10