ElementUI如何修改Dialog的標(biāo)題樣式
更新時(shí)間：2023年10月19日 11:24:05 作者：呈兩面包夾芝士
這篇文章主要介紹了ElementUI如何修改Dialog的標(biāo)題樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
問題描述
修改Dialog彈出框標(biāo)題樣式，要求車牌號(hào)為藍(lán)色
后面的文本為默認(rèn)樣式效果如圖
原因分析
通過看源碼發(fā)現(xiàn)<el-dialog>的title實(shí)際上是一個(gè)<slot>插槽
只需要在插槽里布好局就可以修改樣式
解決方案
代碼如下：
<el-dialog v-model="QRCodeVisible" center>
<template #title>
<div class='titleZise'><span class="QRTitle">{{QRCodeTitle}}</span>代駕險(xiǎn)二維碼</div>
</template>
</el-dialog>
然后在CSS中設(shè)置相應(yīng)的樣式即可。
效果圖：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue使用vue-layer-mobile組件實(shí)現(xiàn)toast，loading效果
這篇文章主要介紹了詳解vue使用vue-layer-mobile組件實(shí)現(xiàn)toast，loading效果，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了OpenDataV低代碼平臺(tái)新增組件流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問題
這篇文章主要介紹了使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue3使用router,params傳參為空問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
在本篇文章里小編給大家整理了關(guān)于vue的for循環(huán)使用方法和步驟，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
elementplus?中?DatePicker?日期選擇器樣式修改無效的問題及解決方案
這篇文章主要介紹了elementplus中DatePicker日期選擇器樣式修改無效的問題,DatePicker日期選擇器彈出面板默認(rèn)掛載在body上,所以在組件中添加了?scoped?屬性的?style?標(biāo)簽下是修改不到其樣式的,講解了datepicker的使用方法,及常見的配置項(xiàng)和對(duì)應(yīng)的值,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue自定義指令獲取不到參數(shù)的原因及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue中動(dòng)態(tài)Class的實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
vue 實(shí)現(xiàn)模糊檢索并根據(jù)其他字符的首字母順序排列
這篇文章主要介紹了vue 實(shí)現(xiàn)模糊檢索，并根據(jù)其他字符的首字母順序排列,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
解決ant design vue 表格a-table二次封裝,slots渲染的問題
這篇文章主要介紹了解決ant design vue 表格a-table二次封裝,slots渲染的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10