element Ui对话框样式修改(样式篇)

已于 2022-03-11 11:28:10 修改
阅读量4.6k 收藏 8
点赞数 5
分类专栏： web前端 element ui 文章标签： vue.js 前端
于 2022-03-04 11:40:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skyblue_afan/article/details/123272945
版权

1、原element对话框样式

在这里插入图片描述

2、开始修改

先给对话框添头部和尾部添加边框线

// 对话框样式
.el-dialog__header {
  border-bottom: 1px solid #e3e8ee;
}
.el-dialog__footer {
  border-top: 1px solid #e3e8ee;
}

在给对话框添加圆角

// 对话框圆角
.el-dialog__wrapper {
  .el-dialog {
    border-radius: 10px;
  }
}

3、修改后的对话框

在这里插入图片描述

skyblue_afan
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue中el-dialog修改样式
~~
08-13 8500
效果图： 使用： <template> <div> <LjButton @click="dialogVisible = true">打开弹出框</LjButton> <div class="LjDialog"> <el-dialog title="" :visible.sync="dialogVisible" :modal-ap.
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ElementUI dialog弹出层样式优化
艾丽的博客
01-13 1198
效果图 让滚动条显示在当前弹框的最右侧，而不是浏览器窗口的最右侧 html <el-dialog :visible.sync="dialog" :title="dialogTitle" :modal-append-to-body="false" append-to-body width="1200px" class="parent-dialog"> <el-card> <canvas id="canvas" :width="canvas.wid
vue+element-ui聊天界面框（1）
最新发布
Q_Qshine的博客
04-11 320
【代码】vue+element-ui（1）
自定义圆角的dialog
06-16
dialog在Android开发中是非常常用的，但是系统自带的样式，有限，所以我们需要自定义dialog,定义出我们喜欢的样式。
JS弹出层对话框,Tooltip提示,Msg消息框
11-18
JS弹出层对话框插件源码，包含弹出层对话框和Tooltip提示框，消息框等多种功能，兼容主流浏览器（注：不兼容IE9以下版本的IE浏览器）。内置4种颜色的皮肤，且可以自定义对话框样式，可设置对话框位置。Tooltip可以自定义样式（空心、实心自由设置），并且有上下左右共12个位置的方位选择。插件参数很多（见源码），可以组合使用，具体调用方法请参考示例。
el-dialog使用、样式自定义
gugugutime.com
11-29 1万+
el-dialog提供的样式
自定义el-dialog的样式
卷发头的鲁智深的博客
03-11 6529
自定义dialog的样式，修改element的组件
el-dialog弹窗样式
qq_40576178的博客
12-07 1119
<!-- 显示弹窗 --> <el-dialog title="重大隐患" :visible.sync="dialogVisible" width="60%" > <!--插槽会替换title显示的内容 --> <div slot="title" class="header-title"> <span v-show="d.
elementui 修改el-dialog样式
jiaxiaohong_csdn的博客
03-20 2815
用文档里的自定义属性custom-class=‘batch-box’，然后在style中写（不能有scoped属性，如果不想删该属性，则在style scoped下面再写一个style即可。亲测：如果写到style scoped中即使用::v-deep也不生效~）在外层添加一个父盒子比如class='batch-box',然后在style scoped中用::v-deep();方案一、（如果添加append-to-body属性，则此方案不生效）
【前端】element自定义el-dialog标题样式，实现title部分放置按钮
m0_64210833的博客
03-29 4770
element自定义el-dialog标题样式，实现title部分放置一个或多个按钮
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
主要介绍了基于element-ui对话框el-dialog初始化的校验问题解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现element-ui对话框可拖拽功能
10-18
主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE element-ui响应式步骤进度条样式代码
06-11
几款简单的基于VUE element-ui响应式步骤进度条样式代码，active往里传值即可显示步骤。
JavaScript制作简易聊天窗口
qq_60012576的博客
06-15 1228
JavaScript 聊天窗口
Element UI 中的Dialog组件美化
小木鱼的博客
03-10 3906
针对element ui中的dialog组件的美化
(Dialog)解决：Element-ui 中 Dialog 弹出对话框的样式的修改问题
热门推荐
狮子座的男孩
07-19 1万+
代码】解决Element-ui中Dialog弹出对话框的样式的修改问题。
element ui 对话框蒙层
08-12
回答: 在Element UI的对话框组件中，可以通过设置`modal`属性来控制是否需要蒙层。`modal`属性的值为布尔类型，当设置为`true`时，对话框会显示蒙层，反之则不显示蒙层。默认情况下，对话框是带有蒙层的。如果你想要修改对话框的样式，你可以在全局样式中修改对话框的相关类名，如`.el-dialog__header`、`.el-dialog__body`和`.el-dialog__footer`等。这样可以为对话框的标题、内容和底部添加自定义的样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Element ui Dialog 对话框遮罩层挡住对话框问题](https://blog.csdn.net/tian_nao/article/details/128254982)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [element-ui对话框dialog详解](https://blog.csdn.net/m0_63040701/article/details/130906203)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值