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