修改elment-ui的el-dialog__body

最新推荐文章于 2024-05-31 10:19:28 发布
最新推荐文章于 2024-05-31 10:19:28 发布
阅读量731 收藏
点赞数
分类专栏： elementui 文章标签： ui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CodingStudying/article/details/132423213
版权
文章讲述了如何在不使用scoped属性的情况下，为VueElementUI的el-dialog组件添加一个专属类名，以防止样式冲突，重点在于修改`<el-dialog>`的`custom-class`属性并调整相关样式。
摘要由CSDN通过智能技术生成

在非scoped状态下修改，给el-dialog 添加一个专属类名，防止样式污染

<el-dialog v-model="printPreviewDialog" width="50%" custom-class="rebarDetail-dialog">
</el-dialog>

在添加scoped属性的style标签下 新增一个style标签

<style>
 .rebarDetail-dialog .el-dialog__body{
  padding-top: 0px;
}
</style>

CodingStudying
关注
专栏目录
Element-UI快速入门
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
实现在引入vue.js中element-ui的el-dialog弹框拖拽
千山雪的博客
11-06 1565
实现在引入vue.js中element-ui的el-dialog弹框拖拽 创建一个directive.js 在需求页面引入该js(js内容如下) 在使用模板处加入v-dialogDrag 参数 <el-dialog class="confirm" v-dialogDrag> </el-dialog> // v-dialogDrag: 弹窗拖拽 Vue.directive...
修改 el-dialog__body padding
修行小蜗牛的博客
08-03 1886
在dialog外部套个div，再写deep。
【vue如何方便地调整el-dialog中body的样式】
u012632105的博客
06-06 901
vue如何随心所欲调整el-dialog中body的样式
【问题记录】如何修改element中的el-dialog-body样式
最新发布
qq_57676486的博客
05-31 444
解决办法：不管它原本写的什么直接写新的覆盖掉。
反思总结 -- el-dialog组件解决修改el-dialog__body样式不生效问题
m0_61480542的博客
01-31 1329
来修改样式, 如果这样写了还不生效, 找到最底层的index.html页面, 在该页面的style样式中写全局该样式。首先要通过custom-class="vDialog"设置dialog的class属性, 在通过。
el-dialog样式修改
qq_43894292的博客
11-20 854
el-dialog样式修改
vue3 elementui-plus el-dialog修改了body样式不生效问题解决方案
weixin_43929063的博客
12-08 1815
这样不会影响到其他区块的样式，也能针对单一模块进行设定，最新的elementui-plus其他方式都没用，已经试过deep 之类。先在el-dialog加modal-class=“topclass”
解决修改el-dialog__body样式无效的问题
qq_38858546的博客
09-28 5061
解决修改el-dialog__body无效的问题
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
Element-ui中元素滚动时el-option超出元素区域的问题
12-01
popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body) popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标, 移动滚动条的时候, 并没有触发mouseup事件. popperEl并没有监听滚动...
element-ui中el-dialog遮罩+codemirror无智能提示
璐璐璐
08-24 1362
最近在使用elui的时候遇到一个问题 就是el-dialog使用的时候因为弹出的弹框里面加了codemirror编辑器 导致el-dialog中原本在弹框后面的遮罩变成在主体前面 类似于图上的情况 查询之后发现是需要写modal-append-to-body属性 发现这样写之后虽然遮罩正常了，但是编辑器的智能提示没有了 以为是编辑器的配置出现问题了，弄了好久 最后发现原来还是遮罩的原因 最后改为 :modal-append-to-body=“false” 就可以了 最后效果 顺便说一下怎么改变这个
element el-dialog样式修改
qq_28586135的博客
08-22 6643
element el-dialog样式修改
el-dialog修改默认内边距el-dialog__body解决方案
简单点的博客
11-16 1902
el-dialog修改默认内边距el-dialog__body解决方案
elementui自定义修改dialog标题、以及body部分内容样式
m0_61676604的博客
05-08 1724
elementui自定义修改dialog标题样式
vue 随心所欲调整el-dialog中body的样式
热门推荐
qq_43258500的博客
05-22 1万+
vue 随心所欲调整el-dialog中body的样式 <el-dialog :visible.sync="dialogVisible" width="30%" class="dialogClass"//设置弹框样式 :showClose="showClo" :close-on-click-modal="false" > <div slot="title"> <b>系统提示&l
修改el-dialog标题及内容样式
it_mins的博客
01-20 2546
当前el-dialog标题无内容，但是header仍然存在（头部显示占据一部分空白），同时需要去除内容部分的padding。此处还需注意去除header会导致关闭对话框的按钮无法显示，可以使用z-index进行修改。在el-dialog外部嵌套一层div元素，并对其设置类名，在该元素下对需要修改的。使用样式穿透（注：此处不使用样式穿透不生效）。
element ui 饿了么UI中el-dialog样式修改问题
yehaocheng520的博客
05-22 1万+
最近在使用element-ui时，使用到了弹窗组件： element-ui 官网链接地址： element-ui 官网链接地址 类似于以下代码： <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-foo
elementui 修改el-dialog样式
jiaxiaohong_csdn的博客
03-20 3118
用文档里的自定义属性custom-class=‘batch-box’，然后在style中写（不能有scoped属性，如果不想删该属性，则在style scoped下面再写一个style即可。亲测：如果写到style scoped中即使用::v-deep也不生效~）在外层添加一个父盒子比如class='batch-box',然后在style scoped中用::v-deep();方案一、（如果添加append-to-body属性，则此方案不生效）
element-ui如何修改el-dialog的修改样式
05-05
如果您想要自定义 Element UI 的 `el-dialog` 样式，有以下两种方式： 1. 使用 `scoped` CSS 在 `el-dialog` 组件上添加 `scoped` 属性，然后使用 CSS 来修改样式。例如： ```html <template> <el-dialog title="Dialog Title" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="false" scoped > <p>Dialog Content</p> </el-dialog> </template> <style scoped> .el-dialog__header { background-color: #f0f0f0; color: #333; } .el-dialog__body { padding: 20px; } </style> ``` 在上面的例子中，我们修改了 `el-dialog` 头部的背景色和字体颜色，以及内容区域的内边距。 2. 使用全局 CSS 在全局 CSS 文件中添加样式，来覆盖默认样式。例如： ```css .el-dialog__header { background-color: #f0f0f0; color: #333; } .el-dialog__body { padding: 20px; } ``` 在这种方式下，所有使用 `el-dialog` 组件的地方都会应用这些样式。 需要注意的是，如果您使用了 `scoped` CSS，那么您需要在样式中使用 `/deep/` 或者 `>>>` 来穿透组件的作用域。例如： ```html <template> <el-dialog title="Dialog Title" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="false" scoped > <p>Dialog Content</p> </el-dialog> </template> <style scoped> .el-dialog /deep/ .el-dialog__header { background-color: #f0f0f0; color: #333; } .el-dialog /deep/ .el-dialog__body { padding: 20px; } </style> ``` 在上面的例子中，我们使用了 `/deep/` 来穿透 `el-dialog` 的作用域，来修改其样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值