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-cli 为项目设置别名的方法

    vue-cli 为项目设置别名的方法

    这篇文章主要介绍了vue-cli 为项目设置别名的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue如何封装Axios的get、post请求

    vue如何封装Axios的get、post请求

    这篇文章主要介绍了vue如何封装Axios的get、post请求,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue 2源码解析Parse函数定义

    Vue 2源码解析Parse函数定义

    这篇文章主要为大家介绍了Vue 2源码解析Parse函数定义,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

    vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

    这篇文章主要介绍了vue 百度地图(vue-baidu-map)绘制方向箭头折线,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • 关于路由重定向redirect的基本使用

    关于路由重定向redirect的基本使用

    这篇文章主要介绍了关于路由重定向redirect的基本使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue中使用微信公众号js-sdk踩坑记录

    vue中使用微信公众号js-sdk踩坑记录

    这篇文章主要介绍了vue中使用微信公众号js-sdk踩坑记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue中的watch是什么以及watch和computed的区别

    Vue中的watch是什么以及watch和computed的区别

    这篇文章主要介绍了Vue中的watch是什么以及watch和computed的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue3中slot插槽基本使用

    Vue3中slot插槽基本使用

    插槽slot可以说在一个Vue项目里面处处都有它的身影,比如我们使用一些UI组件库的时候,我们通常可以使用插槽来自定义我们的内容,这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下
    2022-08-08
  • Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决

    Vue启动失败报错:Module not found: Error: Can‘t resolve &apos

    这篇文章主要给大家介绍了关于Vue启动失败报错:Module not found: Error: Can‘t resolve 'less-loader'解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • el-form表单实现校验的示例代码

    el-form表单实现校验的示例代码

    本文主要介绍了el-form表单实现校验的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-07-07

最新评论