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