elementUI中的$confirm調(diào)換兩個(gè)按鈕位置的實(shí)例代碼
更新時(shí)間：2024年03月12日 10:56:40 作者：zj_zjk_sjz
這篇文章主要介紹了elementUI中的$confirm調(diào)換兩個(gè)按鈕位置的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
$confirm默認(rèn)兩個(gè)按鈕的位置為：取消在前，確認(rèn)在后，而我們?cè)陧?xiàng)目中經(jīng)常要求：確認(rèn)在前，取消在后，所以需要調(diào)換兩個(gè)按鈕的位置。修改后的樣式如下圖所示：
1.設(shè)置樣式代碼。
注意：如果放到公共樣式文件里,第一種寫法；
如果放到vue文件的局部樣式中，第二種寫法，需要在樣式前邊加深度作用選擇器（/deep/…）)
<style>
/*調(diào)換兩個(gè)按鈕的位置*/
.el-message-box__btns{
display:flex;
flex-direction:row-reverse;
}
/*拉開兩個(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;
}
/*拉開兩個(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;
}
/*拉開兩個(gè)按鈕的距離10像素，給取消按鈕10像素的左margin。*/
.custom-cancel-button{
margin-left:10px;
}
</style>兩個(gè)按鈕位置改變完成。注意，$confirm在項(xiàng)目中應(yīng)用較多，尤其是后臺(tái)管理系統(tǒng)，刪除時(shí)的提示都用這個(gè)，所以兩個(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布置導(dǎo)航守衛(wèi)獲取用戶信息，有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了Vue設(shè)置頁面輪詢實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-11-11
vue3使用watch監(jiān)聽props的值的注意事項(xiàng)及說明
這篇文章主要介紹了vue3使用watch監(jiān)聽props的值的注意事項(xiàng)及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
Vue實(shí)例中el和data的兩種寫法小結(jié)
這篇文章主要介紹了Vue實(shí)例中el和data的兩種寫法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-11-11
Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開發(fā)各種項(xiàng)目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對(duì)vue?react組件暴露方法相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-11-11
vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例
本篇文章主要介紹vue2.0 移動(dòng)端實(shí)現(xiàn)下拉刷新和上拉加載更多的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了VueCli3.0中集成MockApi的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
使用arco-design-pro的vue3后臺(tái)框架, 切換路由時(shí), 組件包裹的keepAlive不生效, 切換tab后組件狀態(tài)會(huì)刷新, 并重新獲取接口, 導(dǎo)致頁面切換時(shí)閃爍,所以本文給大家介紹了Vue3使用KeepAlive不生效的解決方法,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了vue的代理配置pathRewrite重寫不生效問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04