ElementUI如何修改Dialog的標題樣式
更新時間:2023年10月19日 11:24:05 作者:呈兩面包夾芝士
這篇文章主要介紹了ElementUI如何修改Dialog的標題樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題描述
修改Dialog彈出框標題樣式,要求車牌號為藍色
后面的文本為默認樣式效果如圖
原因分析
通過看源碼發(fā)現(xiàn)<el-dialog>
的title實際上是一個<slot>
插槽
只需要在插槽里布好局就可以修改樣式
解決方案
代碼如下:
<el-dialog v-model="QRCodeVisible" center> <template #title> <div class='titleZise'><span class="QRTitle">{{QRCodeTitle}}</span>代駕險二維碼</div> </template> </el-dialog>
然后在CSS中設置相應的樣式即可。
效果圖:
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實例代碼詳解
這篇文章主要介紹了vue 百度地圖(vue-baidu-map)繪制方向箭頭折線,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04Vue中的watch是什么以及watch和computed的區(qū)別
這篇文章主要介紹了Vue中的watch是什么以及watch和computed的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?&apos
這篇文章主要給大家介紹了關于Vue啟動失敗報錯:Module?not?found:?Error:?Can‘t?resolve?'less-loader'解決的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-03-03