ElementUI如何修改Dialog的标题样式
更新时间：2023年10月19日 11:24:05 作者：呈两面包夹芝士
这篇文章主要介绍了ElementUI如何修改Dialog的标题样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题描述
修改Dialog弹出框标题样式，要求车牌号为蓝色
后面的文本为默认样式效果如图
原因分析
通过看源码发现<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-layer-mobile组件实现toast，loading效果
这篇文章主要介绍了详解vue使用vue-layer-mobile组件实现toast，loading效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了OpenDataV低代码平台新增组件流程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了使用el-form之表单校验自动定位到报错位置问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
在本篇文章里小编给大家整理了关于vue的for循环使用方法和步骤，有需要的朋友们跟着学习下。2019-02-02
elementplus 中 DatePicker 日期选择器样式修改无效的问题及解决方案
这篇文章主要介绍了elementplus中DatePicker日期选择器样式修改无效的问题,DatePicker日期选择器弹出面板默认挂载在body上,所以在组件中添加了 scoped 属性的 style 标签下是修改不到其样式的,讲解了datepicker的使用方法,及常见的配置项和对应的值,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了Vue自定义指令获取不到参数的原因及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了vue 实现模糊检索，并根据其他字符的首字母顺序排列,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
解决ant design vue 表格a-table二次封装,slots渲染的问题
这篇文章主要介绍了解决ant design vue 表格a-table二次封装,slots渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论