定义不同的el-dialog样式

最新推荐文章于 2025-01-07 14:13:39 发布

原创最新推荐文章于 2025-01-07 14:13:39 发布 · 385 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

本文介绍了一个具体的el-dialog组件样式定制案例，通过自定义class实现了全局样式覆盖，特别针对背景颜色进行了详细说明。

 <el-dialog
          file-realtime-transcribe-edit-alert
          class="dialog_pas"
          width="800px"
          title="文件编辑"
          :visible.sync="fileTranscribe_Edit_Visible"
          :close-on-click-modal="false"
          :show-close="false"
        >

file-realtime-transcribe-edit-alert 为自定义的样式关键字

以下对关键字为 file-realtime-transcribe-edit-alert 的el-dialog__wrapper样式进行全局设置


// index.css

.el-dialog__wrapper[file-realtime-transcribe-edit-alert] .el-dialog{
  background: #272a2d !important;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

codeLAU

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【css】el-dialog弹框样式

jieweiwujie的博客

01-04

2083

el-dialog弹框样式

Cesium 3 ，使用 Vue + Cesium 和 Element实现可拖拽视频弹框，并使用 mixins 混入特性实现（在 Cesium 上实现可拖拽的实时视频播放弹框，底层元素可以正常操作）

NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）

07-09

1936

⭐在前端 GIS 领域，特别是在Cesium平台上，实现一个既能拖动，又能播放实时视频的弹框是提升用户体验的关键。这里分享记录，如何利用 VueJS 和 Element UI 构建这样一个弹窗，并通过 mixins 混入视频播放功能，同时确保拖拽弹框时，底层元素仍可交互。

参与评论您还未登录，请先登录后发表或查看评论

vue中怎么将（el-dialog）对话框改成【自定义弹窗】样式，2种方式

weixin_50450473的博客

07-26

4845

将以上弹窗组件，改成下面自定义样式的效果当加入自定义内容时，发现el-dialog存在背景色以及head部内容和关闭按钮，找到el-dialog的背景元素，并修改如下： /deep/.el-dialog{ // 取消阴影和背景色 background:rgba(0,0,0,0); -webkit-box-shadow:01px3pxrgba(0,0,0,0); box-shadow:01px3pxrgba(0,0,...

弹窗样式 el-dialog

weixin_50885665的博客

04-26

2847

【代码】弹窗样式 el-dialog。

自定义el-dialog的样式

qq_45750213的博客

02-29

2195

自定义el-dialog的样式

vue修改子组件的样式如 el-dialog

@you的博客

04-21

2414

一般vue组件会有自己的样式，在style中加了scoped 代表私有 <style lang="scss" scoped> ... </style> 去掉scope虽然可以修改样式，但是是修改的是全局的，其他组件再引用就会别污染修改子组件样式需要在父组件加 /deep/ 或者::v-deep 才能修改 //建议使用/deep/,::v-deep有些不识别 .icon-dialog { ::v-deep .el-dialog { border-radiu...

el-dialog好看的css样式效果

Ye__Li的博客

02-01

1390

自定义的好看的dialog样式效果

el-dialog自定义组件弹框样式

qq_54146568的博客

05-11

502

【代码】el-dialog自定义组件弹框样式。

el-dialog自定义样式清除表单自定义表单验证

weixin_51565477的博客

08-17

588

template :show-close="false"是关闭默认的X号,slot="title"自定义一个X @close是弹窗关闭会触发，@close='closeDialog’关闭之后清空验证  <el-row class="btn-list"> <el-button @click="dialogVisibleClick">新增</el-button> </el-row> <!-- 新增弹窗 .

el-dialog 组件在＜style lang=“scss“ scoped＞标签

weixin_43869439的博客

01-07

426

【代码】el-dialog 组件在＜style lang=“scss“ scoped＞标签。

el-dialog使用、样式自定义

热门推荐

gugugutime.com

11-29

1万+

el-dialog提供的样式

Vue中el-dialog修改样式

08-13

9499

效果图：使用： <template> <div> <LjButton @click="dialogVisible = true">打开弹出框</LjButton> <div class="LjDialog"> <el-dialog title="" :visible.sync="dialogVisible" :modal-ap.

el-dialog嵌套,修改内层el-dialog样式(自定义样式)

song_song0927的博客

08-11

5774

el-dialog嵌套el-dialog使用,自定义内层el-dialog样式,修改el-dialog样式

element自定义el-dialog标题样式，实现在title部分放置按钮

changyana的博客

10-11

5779

如图，需求是在title的右边有一个【编辑】按钮，此时需要自定义title部分的内容，而不是直接使用官方给的格式。

【vue】Element UIel-dialog 自定义样式 + 去除弹框遮罩层底层可点击

蓝胖子的博客

03-10

5186

【vue】Element UIel-dialog 自定义样式 + 去除弹框遮罩层底层可点击

一文读懂Vue中的el-dialog（附Demo）

码农研究僧的博客

04-15

7911

el-dialog 是 Element UI 框架中的一个组件，用于创建对话框提供了丰富的功能和选项，可以用来创建各种类型的对话框，如信息确认框、表单填写框等

【前端】element自定义el-dialog标题样式，实现title部分放置按钮

m0_64210833的博客

03-29

7809

element自定义el-dialog标题样式，实现title部分放置一个或多个按钮

element ui的双层el-dialog样式控制

Beam

08-30

8382

关键代码如下： <html> <head> …… </head> <body> <div class="dept"> <el-dialog width="450px" :visible.sync="dialogVisible"> <el-button v-model="deptBox.pare...

el-dialog样式修改为可定义颜色

最新发布

03-04

### 修改 `el-dialog` 组件样式为了在 Element UI 中修改 `el-dialog` 的背景色和边框颜色，可以采用多种方法来覆盖默认样式。以下是具体实现方式： #### 使用 `/deep/` 或者 `::v-deep` 对于 Vue 单文件组件中的作用域样式，默认情况下不会影响子组件的样式。要使样式穿透到子组件，可使用 `/deep/` 或 `::v-deep` 关键字。 ```css <style scoped> /deep/ .dialog1 .el-dialog { background-color: #041634; } </style> ``` 此代码片段展示了如何通过设置 `.el-dialog` 类下的背景色来自定义对话框的颜色[^1]。 #### 针对特定部分应用不同风格如果希望仅改变某些区域（如主体或页脚）的颜色，则可以在原有基础上进一步细化选择器路径。 ```css <style scoped> /deep/ .dialog1 .el-dialog__body, /deep/ .dialog1 .el-dialog__footer { background-color: #041634; } </style> ``` 上述 CSS 片段专门针对 `.el-dialog__body` 和 `.el-dialog__footer` 进行了背景色定制。 #### 调整边框属性除了更改背景色外，还可以调整边框的相关属性以达到更佳视觉效果。例如去除顶部、底部以及单元格间的边界线。 ```css <style scoped> .el-dialog { border-radius: 8px; /* 圆角 */ } /deep/ .el-dialog__headerbtn { top: 15px; right: 15px; } /deep/ .el-dialog__close { font-size: 20px; } /deep/ .el-dialog--center .el-dialog__body { padding-top: 20px; padding-bottom: 20px; } /* 移除内边距 */ /deep/ .el-dialog__body { padding: 0!important; } /* 更改边框颜色 */ /deep/ .el-dialog { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); border: solid 1px red !important; /* 自定义边框颜色 */ } </style> ``` 这段代码不仅设置了新的边框宽度和阴影效果，还指定了红色作为边框颜色，并移除了内部填充空间[^4]。 #### 实现透明背景有时可能需要创建具有半透明或完全透明背景的效果，在这种情况下可以直接指定 `background-color` 属性为 `transparent` 并确保其他必要样式也一并更新。 ```css <style scoped> ::v-deep .transparent-bg .el-dialog__wrapper { background-color: transparent !important; background: transparent !important; color: #fff; } </style> ``` 这里给出了一个例子说明怎样让整个弹窗变得透明化处理[^3]。综上所述，通过对这些样式的适当组合运用，能够灵活地控制 `el-dialog` 各方面的外观特征，满足不同的设计需求。