element-ui如何修改el-dialog的样式?

本文共 410 字,预计阅读时间 1 分钟

要修改dialog的样式不能直接在<style scoped>中修改,这样修改后不会生效。做法是把scoped去掉,然后在dialog标签上自定义一个class,最好不要和其他的class同名,然后通过此class选择器再去修改里面的相关样式即可。

复制代码
<template>
   <el-dialog 
        title="信息" 
        :visible.sync="dialogFormVisible" 
        width="60%" 
        class="my-info-dialog">

        我是弹框

    </el-dialog>
</template>
<style>
.my-info-dialog .el-dialog__body {
        padding: 0px;
    }
</style>    
复制代码

上例是修改弹框中内容距离标题的距离。

posted @   钟小嘿  阅读(16810)  评论(5编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
历史上的今天:
2020-07-09 Oracle基础
点击右上角即可分享
微信分享提示