修改单页面原生el-类样式，不可直接写el-样式，需在外部包裹后使用

已于 2022-03-28 14:46:41 修改
阅读量1.6k 收藏 1
点赞数
分类专栏： 前端 文章标签： vue.js elementui
于 2022-03-28 14:44:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42722245/article/details/123794464
版权

本半吊子前端被专业前端骂的一个问题，页面修改element原生样式时，直接在页面中写了修改原生样式，并未给外层进行包裹，指向指定页面。

修改el-开头的页面样式，需要在该样式外面包裹一层该页面独有的元素，否则会影响全局样式。打开过该页面再去往别的页面，相同组件都会被该样式影响。

错误写法：
在这里插入图片描述
正确写法：
在这里插入图片描述

在这里插入图片描述

奚小言
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EL-ADMIN是一个非常火的java框架 , EL-ADMIN Flutter,EL-ADMIN APP
06-15
在EL-ADMIN官网看了介绍，框架使用了...EL-ADMIN这个框架在java非常火，后端和前端的技术非常先进，发现缺少一个原生APP，经过一段时间的研究，使用Flutter把EL-ADMIN原生的APP做出来 这里只是APP，可以安装在安卓手机
原生js更改css样式的两种方式
10-20
然而，当涉及复杂的样式或者需要长期维护的项目时，推荐使用`node.className`结合预先定义好的CSS类，因为这样可以更好地遵循“分离关注点”的原则，提高代码的可维护性和可读性。 无论选择哪种方法，了解它们的...
修改el自带样式的方法
weixin_46194350的博客
06-30 431
修改el自带样式
自用element-plus 弹窗样式修改
weixin_42164352的博客
06-28 755
{{ checkedArr.length }}条 删除后将无法恢复
Overlay Element
linuxheik的专栏
01-06 479
随笔 - 51  文章 - 0  评论 - 52 每天花30分钟看OGRE--(15)3D Overlay Element 16.Overlay里可以放3d元素？ 如果这样的话，就可以用来做3d的新手引导小精灵了！不用再跟巨人一样用序列帧了！ depth_check on时 depth_check off后
EL表达式
热门推荐
Overlay762的博客
03-22 1万+
1. EL表达式 Expersion Language 表达式 通过在JSP页面当中以 $ 美元符号开头 一对尖括号{} 表示一个EL表达式 在JSP里的充当辅助编写一些代码 减少JSP表达式 能很好的整洁JSP页面 1.1 语法 基本使用: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>$Title$</title
element-ui element-plus overlay - 分析
huxianc的博客
12-21 1526
源代码地址 - overlay version:element-plus 1.0.1-beta.0 <script lang="ts"> import { createVNode, defineComponent, renderSlot } from 'vue' import { PatchFlags } from '@element-plus/utils/vnode' export default defineComponent({ name: 'ElOverlay', pr.
EL-ADMIN是一个非常火的java框架 , EL-ADMIN Flutter,EL-ADMIN APP 源码
06-15
EL-ADMIN这个框架在java非常火，后端和前端的技术非常先进，发现缺少一个原生APP，经过一段时间的研究，使用Flutter把EL-ADMIN原生的APP做出来 1）这是自己开发的源码 2）提供几个获取列表、明细的例子，其它完全...
Android4.0.4-原生-软件列表-可精简列表.pdf
11-17
Android4.0.4-原生-软件列表-可精简列表.pdf
jquery-WeUI微信开发设计原生视觉样式库特效.zip
07-11
<title>WeUI微信开发设计原生视觉样式库特效</title>  <... jquery-WeUI微信开发设计原生视觉样式库特效是一款同微信Web原生视觉体验一致的基础样式库，为微信Web开发量身设计的。
vue3 elementplus el-drawer抽屉 实现在指定组件里打开
niyooooo的博客
08-05 4727
但是我这样不行，，最后查看控制台，发现el-drawer外层都包裹一个el-overlay遮罩层沾满全屏，position是fixed。所以解决方式是在抽屉外套一层div，设置，然后。
Vite+Vue3+ElmentPlus在部分浏览器上弹窗无法正常显示的问题
诗酒趁养狗
08-17 1383
但是360极速浏览器等部分浏览器采用的Chrome内核比较老，还不识别inset，所以无法正常显示。只需要在vite.config.js中配置css的编译目标，设置成更早一点的标准即可，也可以直接设置成主流浏览器版本比如chrome83。目前来说，Vite默认会按照es2020标准来编译，弹窗中el-overlay以及类似的内容中CSS。...
如何对Element组件的样式进行自定义修改
weixin_53068161的博客
07-17 9041
如何对Element+组件的样式进行自定义修改前言举例项目主要代码：效果：一、定位需要修改的样式二、使用全局样式的修改方法代码如下三.使用局部样式的修改方法代码如下 前言 在项目开发过程中我们常常需要借助第三方组件库，而element就是我们使用vue框架是常用的组件库之一。本文章主要解释如何对element中的组件样式进行自定义修改。 提示：以下是本篇文章正文内容，下面案例可供参考 举例项目 主要代码： <template> <div class="body"> <
element ui 表头与内容错位
qq_42431718的博客
10-11 93
element ui 表头与内容错位 网上也有其他一些办法，但我记得对我没什么作用，后来我是用下面这个办法： // 全局设置 .el-table--scrollable-y .el-table__body-wrapper { overflow-y: overlay !important; }
Element Plus源码解析
LY18483的博客
10-11 2967
Element Plus部分组件源码解析
ElementPuls Dialog可拖拽对话框且可操作其他Dom
Flipped的博客
12-14 2272
Vue3使用 ElementPlus Diaiont弹框可拖拽可点击其他功能不关闭弹框
el-link underline
m0_59579040的博客
03-26 3567
饿了妈el-link 的 underline不知道怎么修改颜色问题 修改文字链接下划线 1、 把underline设为false隐藏el-link下划线 <el-link :underline="false">文字链接1</el-link> <el-link >文字链接2</el-link> 2、修改样式 .el-link { color: #1b1b1b; text-decoration: underline;
怎么修改elementui默认样式仅当前页面生效
weixin_42604188的博客
02-10 611
在当前页面生效修改 ElementUI 默认样式的方法是在当前页面的 CSS 样式文件中定义覆盖 ElementUI 组件的样式，比如你可以这样实现： 在当前页面的 CSS 样式文件中引入 ElementUI 样式文件： @import "~element-ui/lib/theme-chalk/index.css"; ...
原生js el-table
最新发布
07-25
在原生JS中，可以使用以下代码来创建el-table组件： ```javascript // 创建el-table组件 var table = document.createElement('el-table'); table.setAttribute('v-loading', 'dataListLoading'); table....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值