vue使用elementUI后scoped踩坑

最新推荐文章于 2023-06-06 17:33:39 发布
最新推荐文章于 2023-06-06 17:33:39 发布
阅读量725 收藏 2
点赞数
分类专栏： 前端 css vue 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43585322/article/details/127053933
版权
前端 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
vue
9 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

当需求改变elementUI组件的样式时，会在style里重新定义样式
为了避免污染外部样式，我加上了scoped标签，但发现加上scoped标签以后所有el-dialog下子标签的样式都无效了。
一番google后找到了原因，scoped标签是通过给一个组件中的所有dom添加了一个独一无二的动态属性，给css选择器额外添加一个对应的属性选择器，来选择组件中的dom,这种做法使得样式只作用于含有该属性的dom元素(组件内部的dom)。
示例图

由于被加上了属性选择器，重新定义的子组件样式没有覆盖到原来的样式导致失效。

解决方案

  1. 写一个没有scoped的style标签，把第三方组件样式放到这个标签里，给用到的组件加上自己的class名，在 style中以树形结构定义子组件的样式，这样子组件的样式会被限定在我们自己定义的class名下，避免了污染外部
  2. 使用/deep/样式穿透
嚭
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue和ElementUI模版
06-03
Vue和ElementUI模版
vue+elementui+tinymce
03-27
vue2+elementUI引入tinymce组件，富文本组件。tinymce文件夹放在public下，在使用页面引入组件即可。弹窗二次打开无法获取焦点问题，在标签加v-if，让富文本组件在弹窗关闭时销毁（原因由于el-dialog弹窗销毁为key...
vue中style设置scoped后部分样式不生效
galaxyJING的博客
03-21 5793
vue中style设置scoped后部分样式不生效
elementUI中tooltip自定义class样式在scoped下不生效问题
qq_190265950的博客
01-27 7216
在项目中遇到一个觉得比较有意思的坑，在vue框架中使用element，遇到动态添加dom元素的组件时（tooltip, dialog等）,在属性popper-class，自定义class时样式不生效，后面经过分析不生效的原因是vue使用scoped后会在当前组件下每个dom元素上添加一个组件唯一标识（例如data-v-fae5bece），class也会编译成data-v-fae5bece,而我们使用popper-class自定义class想写在scoped中，element动态添加的dom上不具备唯一标识d
如何修改elementui组件的样式，以及修改的样式不生效问题
lingliu0824的博客
08-04 1万+
修改elementui组件样式的方法有： 1.根据组件的属性传入相应的样式或者属性值来改变样式（具体属性参考官网）： 如：可以通过:header-cell-style来设置表头单元格的样式，:rowStyle来设置表格每一行的样式 2.通过class 2.1 通过以下方式来改变el-table标签下的表格偶数行的样式。 注意：这个样式必须是全局的才会生效，即style标签不能加scoped,为了避免组件内的其他样式也成为全局样式，可以新建一个style标签放这些组件样式，其他的样式仍然放在style s
深度解析为什么vue组件中添加scoped后某些样式不生效？给出解决办法
孙少的博客
11-08 3335
深度解析为什么vue组件中添加scoped后某些样式不生效？给出解决办法
vue3的element-plus的el-dialog的样式加上scoped发现:deep()不再生效解决方案
weixin_50216073的博客
06-06 4395
想要将 弹框 el-dialog__header .el-dialog__body 的padding值设为0,但是。解决方案: 弹框加上 自定义类名 custom-class。
ElementUI expand | scoped 实习两周总结
dizzydwarf的博客
11-09 318
ElmentUI expand | scoped 实习两周总结 scoped 1 可以scoped和正常的一块用（注意两个标签的顺序） 2 私有化模块，添加data-v-hash的属性 （对使用了scoped里class的部分，在在dom节点里添加data-v-hash的属性，同组件都会添加，但是没在scoped里的class在页面中的css后不会添加） （将scoped里的.class改为.class[data-v-hash]来特定的选择该节点，来实现私有化，不会影响别的组件） 3 如果组件内部包含有其他
vue-elementUI后台管理系统.zip
04-30
技术栈：vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont 本项目的定位是后台管理系统，已经完成模块有用户管理、菜单管理、角色管理、公司管理、权限管理、支付配置。 技术...
基于Vue和ElementUI的后台管理系统设计源码
最新发布
04-05
本资源提供了一套基于Vue和ElementUI的后台管理系统的设计源码，包含91个文件，其中包括23个JavaScript脚本文件，22个Vue组件文件，以及20个PNG图片文件。此外，还包括4个映射文件，3个TTF字体文件，2个HTML页面文件...
基于vue + elementUI的管理系统模板
02-22
基于vue + elementUI的管理系统模板
项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/
weixin_57983561的博客
06-10 339
当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以下三种方法修改样式，并且不影响全局样式： Ⅰ、在原来的css样式下面，新编写一个不带scoped属性style，里面写需要修改的element-ui默认css样式。 缺点：这样设置的是全局样式，意思就是如果你的项目里面有多个css需要修改，那么这么设置，两个地方都会被改变 <style> .my{ margin: 20px; } .my .el-input__inne...
【项目小tips】scoped属性的使用
weixin_44337386的博客
04-17 3543
项目场景： 在做Vue项目的过程中，想要更改Element-ui中轮播图按钮的样式，发现按钮样式只能放在style中，如果放在style scoped中就不会生效。 问题描述 <style> /*生效*/ .el-carousel__button { width: 40px; height: 40px; background-color: pink; border-radius: 20px; } </style> <style scoped> /*不生
修改elementUI样式（在scoped中修改）
itsxyu的博客
11-07 3959
第一种 去掉scoped，不推荐，这样会造成全局样式污染，影响其他页面的样式 第二种 在scoped中，使用深度选择器，可以通过vue-loader提供的新写法 （先安装，在使用）>>> 某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用/deep/组合器 - 它是别名，>>>并且完全相同。 /deep/ .(eleme...
VUE中element-UI 样式修改（vue的scoped影响样式修改）
whylost
05-12 4104
在vue中引入第三方组件库的时候，vue组件中样式的scoped就会阻碍我们修改第三方组件库的样式 在所有需要重新定义样式的element组件上添加自定义class(防止自定义样式影响全局) 1. 在样式外新增一个样式不添加 scoped 的<style>标签 <style> /* 这个样式起效果 */ .myClass .el-input__inner{ border-radius: 10px; } </style> <style scoped>
element-ui样式不能被修改？修改element样式问题
dcxia89的博客
05-22 2万+
用ui组件总免不了需要对它做一些个性化定制的需求，所以我们就要覆盖element的一些样式。首先我们要了解一下vue scoped是什么，很多人非常喜欢用scoped，其实scoped也没有很神秘的，它就是基于PostCss的，加了一个作用局的概念。//编译前 .example { color: red; } //编译后 .example[_v-f3f3eg9] { color: red;...
理解vue之element-ui中的 <template slot-scope="scope">
热门推荐
益添的博客
08-22 15万+
如果有用过element-ui中的table组件，可能会发现有这么一个写法： &lt;template slot-scope="scope"&gt; 在实际的使用过程中，这种用法当然不仅仅局限于此，其他的地方也会用到。到底这里有什么特别之处呢？ 我们看看普通的table用法： 我们先说一说这个基础的用法里面，在el-table中，:data="tableData"是数据集，结构如下...
如何在vue的scoped样式中修改element-ui的样式
WayneP_的博客
07-04 2347
如何在vue的scoped样式中修改element-ui的样式 一般来说修改element-ui样式需要挂在全局才会生效 但是有很多时候,样式并不需要统一修改 查询资料后发现一个深度选择器 /deep/ /deep/ 第三方组件 或者也可以写成 外层元素 >>> 第三方组件 ...
vue组件样式scoped
weixin_33920401的博客
06-01 101
1.vue组件中的样式如果没加scrped，样式代表的是全局样式（避免组件之间样式的冲突）。加了属性代表是模块化的。 其他组件引用button组件 上面分析了单个组件渲染后的结果,那么组件互相调用之后会出现什么样的结果呢？，具体分两种情况：模块一般组件引用模块私有组件（本质和模块私有组件引用模块一般组件一样）；模块私有组件引用模块私有组件。 举个例子：在组件content...
vue elementui 上传图片scoped-slot
08-23
在Vue的ElementUI中，上传组件Upload提供了scoped-slot来设置缩略图模板。这意味着你可以自定义每个上传的图片在列表中的展示方式。通过使用scoped-slot，你可以在Upload组件中添加一个具名插槽（slot），然后在父组件中使用这个插槽来定义缩略图的展示方式。这样就可以根据自己的需求来自定义缩略图的样式和内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue中关于ElementUI上传组件Upload的整理](https://blog.csdn.net/Ethan_zxt/article/details/115055036)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [使用 scoped-slot 去设置缩略图模版，成功上传图片之后回显，在进行编辑，保存成功，但是报错](https://blog.csdn.net/qq_51504439/article/details/127236266)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值