问题描述：

修改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中设置相应的样式即可。
效果图：

ElementUI修改Dialog的标题样式相关推荐

Vue ElementUI 修改消息提示框样式---messageBox 的大小
在窄屏模式下(移动端),提示框的宽度太宽,会出现显示不完全的问题. 应当如何修改 ElementUI 的样式呢? open() {this.$confirm(window.vm.$i18n.t(&qu ...
如何修改elementUI里面Dialog组件标题的样式
项目的需求是将箭头处的标题设计成UI稿上的样式! 然后我发现,代码是这样的, 于是去elementUI源码一探究竟: 源码实际上是在这一块做了一个具名插槽然后将我们在父组件中将标题传进来就可以了: ...
android 对话框美化,Android修改Dialog样式
Android 对话框支持自定义标题,内容,按钮和点击事件,基本上可以满足我们日常的使用. 但有时候我们想要修改对话框的文字,按钮颜色等,系统并没有提供对应的方法,正常情况下只能自定义布局. 接下来通 ...
[vue-element] ElementUI怎么修改组件的默认样式？
[vue-element] ElementUI怎么修改组件的默认样式? 方法一:/deep/ 方法二:>>> 方法三:在外层添加一层div,设置自定义类名,再修改里边的样式, 格式. ...
如何设置多级标题_办公技巧|标题样式amp;多级列表结合，再也不用手动修改1.1、1.2 ...！...
每周一句 Accept the things you cannot change. Have the courage to change the things you can. 接受那些你也无法改变的 ...
js vue 设置excel单元格样式_vue项目使用xlsx-style实现前端导出Excel样式修改（添加标题，边框等），并且上传npm踩坑记录...
前段时间,我们项目提出一个前端导出Excel表格的需求, 这个很简单,利用xlsx,file-saver很容易实现(网上很多教程). 后来需要加入标题,标题居中显示,加入边框等等样式需求,这就给我很多 ...
[ElementUI] 修改ElementUI默认样式
前言: 在使用ElementUI中免不了要根据自身需求修改EleUI的默认样式; <div class="form-box"><el-input v-model= ...
给elementui的dialog标题下方添加一条线提升观感效果
.container /deep/ .el-dialog__header {border-bottom: 1px solid #ebebeb; } 给elementui的dialog标题下方添加一条线 ...
zblog php 侧边栏样式,ZBlogPHP免费主题Blogs如何修改侧边栏搜索框样式？
老古偶尔访问有某些使用 ZBlogPHP 免费主题 Blogs 的站点,发现他们的侧边栏搜索框样式都比较丑,一看就知道这些站长都没有认真阅读Blogs 主题介绍页,因为介绍页中的第四大点侧边栏模块使用 ...
Word 2003 标题样式设置
在对一个论文排版时,有很多标题,通常还分为多个级别,如果我们一个一个的去设置格式去设置大纲级别的话,会浪费我们很多的时间,这里我们讨论一下样式的设置.样式,在word里我们可以理解为是格式的集合.在打 ...

ElementUI修改Dialog的标题样式

问题描述：

原因分析：

解决方案：

ElementUI修改Dialog的标题样式相关推荐

最新文章

热门文章