element ui dialog custom-class不生效

最新推荐文章于 2024-05-29 09:19:40 发布
最新推荐文章于 2024-05-29 09:19:40 发布
阅读量2.3w 收藏 9
点赞数 9
分类专栏： element-ui样式不生效 文章标签： element-ui样式不生效 el-dialog custom-class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42208184/article/details/89961176
版权

自己记录一下：最近使用el-dialog中的custom-class，修改发现样式不生效

图中可以看出页面已经渲染出设置的custom-class类，但是实际上样式并没有生效

左图为页面渲染，右图为自定义类名

 

解决办法：在设置的类名前加上.el-dialog，这样自定义 的类样式就生效了

柠檬茶好喝
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
为啥安装element-plus了，还是出现3个关于element-plus的bug？
weixin_40945354的博客
10-22 1077
% yarn add element-plus yarn add v1.22.10 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caus
element-plus dialog的custom-class不生效
weixin_44891495的博客
10-22 3385
element-plus dialog的custom-class不生效
element-plus中el-dialog使用::v-deep()穿透设置样式不生效踩坑记录
最新发布
jieyucx的博客
05-29 1050
如上：我想去掉插槽自带的下边框和上边框，但是不生效。给el-dialog加个类，在不带scope的。
element ui dialog custom-class不生效最终解决办法
南北极之间
04-11 5797
element ui dialog custom-class不生效最终解决办法
【Element UI】解决 el-dialog 弹框组件设置 custom-class 样式不生效问题
qq_45677671的博客
10-07 3171
解决饿了么组件库 el-dialog 弹框组件设置 custom-class 样式不生效问题
element-ui——修改el-dialog样式自定义class
qq_43201350的博客
02-16 8715
custom-class: Dialog 的自定义类名 <el-dialog :visible.sync="dialogVisible" width="30%" custom-class="customClass" :before-close="handleClose"> </el-dialog> /deep/.customClass { background: #09374c; }
element 弹窗dialog 设置类名不生效问题
爱打篮球的猿
01-19 2473
文档里已经写出custom-class设置自定义类名 话不多说，上代码 <el-dialog custom-class="dialog" title="切换主题颜色" :visible.sync="isshow" width="15%" :before-close="handleClose"> </el-dialog> 设置样式还会不生效，我们需要再类名前面加上el-dialog,即可解决问题； .e
element ui 对话框el-dialog关闭事件详解
01-21
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 ...以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elemnetUI中的嵌套el-dialog弹框中，解决使用custom-class修改样式不生效的问题
热门推荐
Bling Bling ~~
12-14 1万+
举例： <template> <div class="main"> <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button> <el-dialog title="外层 Dialog" :visible.sync="outerVisible"> <el-dialog width="30%" title.
使用ElementPlus的弹窗显示异常
weixin_48474646的博客
11-18 1597
问题描述： 使用ElementPlus的弹窗显示异常 原因分析： 由于系统的弹窗css没导入 解决方案： 在项目的main.js页面里倒入css。导入写法 import ‘element-plus/dist/index.css’
element-ul el-dialog自定义样式
qq_37301074的博客
07-14 403
custom-class 自定义类名。
el-dialog嵌套,修改内层el-dialog样式(自定义样式)
song_song0927的博客
08-11 4107
el-dialog嵌套el-dialog使用,自定义内层el-dialog样式,修改el-dialog样式
为custom dialog box class定义两个窗口过程
TMS_LI的专栏
01-18 876
#include #include "resource.h" LRESULT CALLBACK WindowProc( HWND hwnd, UINT uMsg, WPARAM wParam, LPARAM lParam ) { switch ( uMsg ) { case WM_CLOSE:
《Element Plus 警告》[ElSwitch] [Attribute] “value“ is about to be deprecated in version 2.3.0, please
前端技术
08-04 2397
从 Element UI 直接用 gogocode 升到 Element Plus 报上述警告，定位到组件。
Vue自定义指令——给el-dialog添加拖拽效果
丶扁扁的糖是扁的 的博客
06-10 483
通过js给el-dialog添加拖拽效果 import Vue from 'vue'; // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog');
饿了么el-dialog自定义内容以及el-dialog自定义样式
李十三的博客
06-29 681
饿了么el-dialog自定义内容以及el-dialog自定义样式
element messagebox设置样式
06-06
要设置 Element UI 的 Message Box 的样式，你可以通过以下步骤进行操作： 1. 在你的项目中添加一个 CSS 文件，比如 `messagebox-style.css`。 2. 在这个 CSS 文件中，你可以使用以下类名来选择 Message Box 的不同元素并设置样式： - `.el-message-box`: Message Box 的最外层容器。 - `.el-message-box__header`: Message Box 的标题部分。 - `.el-message-box__message`: Message Box 的消息内容部分。 - `.el-message-box__content`: Message Box 的整个内容区域。 - `.el-message-box__btns`: Message Box 的按钮部分。 - `.el-message-box__btn`: Message Box 中每个按钮的样式。 3. 在你的 HTML 中使用 Message Box 时，加入 `custom-class` 属性来指定你在 CSS 文件中定义的样式类名。如下所示： ```html <el-button @click="showMsgBox" type="primary">显示 Message Box</el-button> <el-message-box title="提示" message="这是一条消息" custom-class="my-message-box" :show-close="false" :show-confirm-button="false" :show-cancel-button="false" > <el-button slot="footer" type="primary" @click="handleConfirm">确定</el-button> </el-message-box> ``` 在这个例子中，我们给 Message Box 添加了一个名为 `my-message-box` 的自定义样式类，用来设置整个 Message Box 的样式。注意，我们还设置了 `show-close`、`show-confirm-button` 和 `show-cancel-button` 属性为 `false`，这是为了隐藏 Message Box 的关闭按钮、确认按钮和取消按钮，让我们自己添加一个按钮来关闭 Message Box。 4. 在你的 CSS 文件中，你可以使用如下方式来定义你的样式： ```css /* 定义整个 Message Box 的样式 */ .my-message-box { border: 1px solid #ccc; border-radius: 4px; background-color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } /* 定义 Message Box 的标题的样式 */ .my-message-box .el-message-box__header { color: #409eff; font-size: 18px; font-weight: bold; } /* 定义 Message Box 的消息内容的样式 */ .my-message-box .el-message-box__message { padding: 20px; font-size: 14px; line-height: 1.5; } /* 定义 Message Box 的按钮的样式 */ .my-message-box .el-message-box__btn { padding: 6px 20px; font-size: 14px; line-height: 1.5; color: #fff; background-color: #409eff; border-color: #409eff; border-radius: 4px; } /* 定义 Message Box 中每个按钮的间距 */ .my-message-box .el-message-box__btn + .el-message-box__btn { margin-left: 10px; } ``` 在这个例子中，我们定义了整个 Message Box 的边框、背景、阴影等样式，以及标题、消息内容和按钮的字体大小、颜色、背景色等样式。我们还定义了每个按钮之间的间距，让它们看起来更舒适。 这样，你就可以通过自定义 CSS 样式来设置 Element UI 的 Message Box 的样式了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值