vue样式穿透 ::v-deep的具体使用

最新推荐文章于 2024-06-04 08:41:33 发布
最新推荐文章于 2024-06-04 08:41:33 发布
阅读量7.4k 收藏 17
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35859392/article/details/108212552
版权

vue样式穿透 ::v-deep的具体使用

 更新时间：2020年06月04日 11:32:59   转载 作者：柳慕笙  
 
这篇文章主要介绍了vue样式穿透 ::v-deep的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。

百度之后发现 可以用 /deep/或::v-deep来解决***（不过在vue3.0的环境下，使用/deep/时，编译会报错）***。没想到官方文档中其实早就给出了解决方案，怪自己没有认真看过文档，对vue的掌握还是不够熟悉啊，得好好学习了。

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>>

最低0.47元/天 解锁文章
瞎转悠达
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决vue加scoped后就无法修改vant的UI组件的样式问题
10-14
- 使用`/deep/`或`::v-deep`来穿透`scoped`，使样式能够影响到子组件Vant的样式。 4. **iOS上输入框被放大**： - 在`index.html`的`<head>`中添加`<meta>`标签，禁止缩放，例如：`<meta content="width=device-...
vue学习日记17：scoped样式冲突
03-21
Vue.js中的 scoped 样式通过`<style scoped>`标签定义，编译时，Vue会在每个组件的CSS选择器后面添加一个唯一的hash值，例如 `.example >>> .my-class` 或者 `/:v-bind(style)="{hash}"`。这种方式使得CSS选择器具有...
神奇的 ::v-deep
热门推荐
qiaoliang_123的博客
11-14 2万+
神奇的 ::v-deep深度作用选择器 之前在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。 百度之后...
/deep/和::v-deep与:deep()
qq_39410252的博客
04-18 1万+
在vue中，我们为了避免父组件的样式影响到子组件的样式，会在 <style> 标签上设置scoped属性，这样它的 CSS 只会应用到当前组件的元素上，即使父组件中有跟子组件相同的class名称或者选择器的时候，也不会影响到子组件的样式。 但是有的时候我们需要，我们需要在一个组件中改变被引入组件的样式，直接使用class命名改变样式没有任何反应，这种情况就需要使用/deep/或::v-deep了。 在vue3.0之前可使用/deep/深度选择器进行样式的更改 //单选框修改未点击时的边框颜色 /
Vue深度选择器 ::v-deep、 :deep()
油墨香^-^的博客
06-04 222
deep()是一个伪类，它可以使处在scoped样式中的选择器影响到子组件。使用scoped后，父组件的样式将不会渗透到子组件。不过，子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响。这样设计是为了让父组件可以从布局的角度出发，调整其子节点根元素的样式。
/deep/ 、＜＜＜ 、::deep
weixin_55782474的博客
04-15 944
改变element-ui某个深层元素或其他深层样式方法 一、方法一： 1、/deep/ 在vue.3.0会报错，可用 ::deep 2、>>> ：深度作用选择器。只作用于css 如果是sass/less的话可能无法识别，这时候使用 /deep/和::v-deep 选择器 二、方法二 移除scoped，新建一个没有scoped的style。一个vue文件允许多个style ...
vue css 深度选择器 ::v-deep
zbailing的博客
01-13 491
深度选择器 v::deep
vue样式穿透::v-deep和/deep/和:deep的具体使用-案例
JackieDYH的博客
06-21 4650
在项目中用到了 vant，使用特别简单，而且组建也非常的丰富。即时这样，在项目中肯定也需要用额外的样式来打造自己的应用。直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式，但如果去掉scoped话又会影响全局样式。想了好多方法，都没得到很好的解决。 搜索之后发现 可以用 /deep/或::v-deep来解决***（不过在vue3.0的环境下，使用/deep/时，编译会报错） ...
[VUE]从scoped到::v-deep样式穿透
weixin_42274805的博客
03-16 1076
一、scoped 用法： <style scoped> ... </style> 解释： 模块样式私有化。style标签里的样式仅适用于当前组件。 缺陷： 只允许修改当前组件里的样式，修改不到当前组件里外部引用的组件的子组件元素样式。 缺陷举例： <tempalte> <div> <timeline /> </div> </template> <script&
vue 出现data-v-xxx的原因及解决
10-15
另外，Vue还提供了深度作用选择器（Deep Selectors），用 `>>>` 操作符来穿透作用域，作用于子组件或组件内的深层元素。例如： ```html .parent >>> .child { /* ... */ } ``` 这会被编译成： ```css .parent...
vue + el-input 中 textarea 实现 placeholder 换行
最新发布
06-14
一种常见的方法是使用`::v-deep`或`>>>`（根据你的Vue CLI版本和CSS预处理器）选择器来深度穿透组件的样式隔离。 下面是一个示例，展示了如何实现`textarea`的`placeholder`换行： ```vue <el-form> <el-form-...
【Vue】/deep/、＞＞＞、v::deep 三种深度选择器
Owen的博客
06-27 3684
在 Vue项目中，当一个组件使用了scoped特性时，组件内的样式只会应用于组件自身。但是有时候我们需要在父组件中改变子组件中的样式，这时就需要用到深度选择器。
深度（穿透）选择器 ::v-deep /deep/ 及 ＞＞＞
千里之行，始于足下！
01-26 1万+
在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。 去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）,最好使用深度选择器。本文对深度选择器做一个总结记录 1、当项目中使用的 css 原生样式 ，需要使用 >>> 深度选择器来修改 外用第三方组件的样式 <style lang="css" s.
深度选择器 /deep/ ＞＞＞ ::v-deep的用法
m0_58348743的博客
12-30 2438
深度选择器 /deep/ >>> ::v-deep的用法
vue3如何使用::v-deep样式穿透
海风依旧
11-06 7559
vue3中如何使用样式穿透？::v-deep让你在开发中更快更便捷的修改样式
vue deep样式穿透使用总结（2022）
samscat的博客
02-09 1万+
在vue2中使用 ::v-deep ::v-deep .el-col { margin-bottom: 20px; } ’ >>> ‘和’ /deep/ '支持已弃用。 在vue3中::v-deep可以使用但是不推荐使用，官方推荐v-deep(.className) ::v-deep(.el-col) { margin-bottom: 20px; } // 缩写 :deep(.el-col) { margin-bottom: 20px; } ...
vue3 :deep()的使用
smileKH的博客
04-07 7796
对应前端小白来说，一看到:deep()这些模式的用法就不理解是啥意思，下面简单介绍一下:deep()是什么以及如何使用。这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！
深度选择器＞＞＞ /deep/ ::v-deep亲测好用
qiuyushuofeng的专栏
08-25 818
深度选择器
elementui样式穿透 ::v-deep
08-27
使用::v-deep可以实现对Element UI组件样式的穿透操作。在样式文件中，通过在一个大的div里面使用::v-deep深度选择器，可以修改Element UI组件的样式。例如，在一个指定了class名为"basic"的div内，使用::v-deep .el-select来修改el-select组件的样式，设置其宽度为100%。同样地，可以使用::v-deep指定其他Element UI组件的样式进行修改。需要注意的是，::v-deep选择器必须写在一个大的div内才可以生效。如果没有使用::v-deep选择器，样式会成为全局样式，可能会影响到其他页面上的Element组件的样式。所以使用::v-deep可以局部修改Element UI组件的样式，避免全局样式的污染。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [#vue# css样式穿透::v-deep的具体使用](https://blog.csdn.net/ZHENGCHUNJUN/article/details/124974776)[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: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值