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

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

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

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:
<style scoped> .a >>> .b { /* ... */ } </style>
上述代码将会编译成:
.a[data-v-f3f3eg9] .b { /* … */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名,同样可以正常工作。

1、>>>

如果vue的style使用的是css,那么则

<style lang="css" scoped>
.a >>> .b {
 /* ... */
}
</style>

但是像scss等预处理器却无法解析>>>,所以我们使用下面的方式.

2、/deep/

<style lang="scss" scoped>
.a{
 /deep/ .b {
  /* ... */
 }
}
</style>

但是有些开发者反应,在vue-cli3编译时,deep的方式会报错或者警告。
此时我们可以使用第三种方式

3、::v-deep

切记必须是双冒号

<style lang="scss" scoped>
.a{
 ::v-deep .b {
  /* ... */
 }
}
</style>

使用场景:

当我们需要覆盖element-ui中的样式时只能通过深度作用选择器

style为css时的写法如下

 .a >>> .b {
  ***
 }

style使用css的预处理器(less, sass, scss)的写法如下

第一种/deep/

 /deep/ .a {
  ***
 }

第二种::v-deep

::v-deep .a{
 ***
}

建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.

到此这篇关于vue样式穿透 ::v-deep的具体使用的文章就介绍到这了,更多相关vue ::v-deep内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解Vue中CSS样式穿透问题

    1. 问题由来 在做两款H5的APP项目,前期采用微信官方推荐的weui组件库.后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库.同时将webpack顺利从3升级到4(项目结构 webpack+vue+vue-store+vue-router+vant+less).相信好多做TOB的开发朋友都会选择顺手组件库.组件库内置了很多样式,方便了我们开发者,同时又因高度封装,有时也会给我们带来一点点困扰.比如,在使用vant组件库中的环形进度条时,查看官方文档,有

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

    之前在项目中用到了 vant,使用特别简单,而且组建也非常的丰富.即时这样,在项目中肯定也需要用额外的样式来打造自己的应用.直接在 <style lang="scss" scoped> .... </style> 中编写的话只会影响当前组件内的样式,但如果去掉scoped话又会影响全局样式.想了好多方法,都没得到很好的解决. 百度之后发现 可以用 /deep/或::v-deep来解决***(不过在vue3.0的环境下,使用/deep/时,编译会报错)***.没想

  • 样式穿透vue中的scoped详谈

    目录 前言 scoped的使命与作用 scoped的副作用 样式穿透(::v-deep) 总结 前言 我们平常在开发过程中特别是Vue技术栈的前端同学们,经常会用到一些UI组件库,特别是element-ui使用的频率是比较高的,我们经常会修改这些UI组件库的默认样式时会使用到深度选择器,大家都知道这么做,有没有想过为什么?趁着疫情在家于是研究了一下,在这里分享一下 scoped的使命与作用 这里用vue做了一个demo,两个页面,一个页面中是掘金的a标签,一个页面是vue的a标签,我们一起看下s

  • Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发. 演示地址: http://45.77.146.32:8081/index.html 项目地址: https://github.com/lenve/VBlog 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 后端技术栈 后端主要采用了: 1.SpringBoot 2.SpringSecurity 3.MyBatis 4.部分接口遵循Restful风格 5.MySQL 前端技术栈 前端主要采用了: 1.Vue

  • Vue 样式切换及三元判断样式关联操作

    假设有需求: 后台返回状态1:启用,0:禁用 1.若要使启用为绿色,禁用不添加其他样式 <el-table-column prop="statusName" align="center" label="状态"> <template slot-scope="scope"> <div :class="{active:scope.row.status==1}"> {{ scop

  • vue之webpack -v报错解决方案总结

    小白学习一下vue,然后了解到了webpack相关的知识,然后就各种安装 cnpm 是国内的源相比国际源要快很多,不知道cnpm的自己查一下吧. cnpm install -g webpack 等一会安装成功了,我就想看一下webpack 的版本 又提示我要安装webpack-cli,那就安装吧 cnpm install -g webpack-cli 等一会就安装好了,再看一下webpack -v就报下面的错了. $ webpack -v C:\Users\Administrator\AppDa

  • Vue 样式绑定的实现方法

    学习 Vue 的时候觉得样式绑定很简单,但是使用的时候总是容易搞晕自己.因为 :class 和 :style 里的数组语法和对象语法和 data 里绑定的值是不太一样的.这篇文章就简单对 Vue 绑定做个总结. 操作元素的class列表和内联样式是数据绑定的一个常见需求,因为它们都是属性,所以可用v-bind处理,通过表达式计算出字符串结果即可.不过字符串拼接麻烦且易错.因此,在将v-bind用于class和style时,Vue做了专门增强,表达式结果类型除了字符串之外,还可是对象或数组. Cl

  • vue样式叠层z-index不起作用的解决方案

    目录 z-index不起作用 z-index失效的原因 vue element 弹框样式叠层问题 z-index不起作用 问题:当点击出现element弹框时,与当前的页面出现叠层问题(使用样式z-index无果),导致弹框页面无法输入. 问题效果图如下: 这里的两个下拉框和echarts图表与弹框修改密码出现叠层问题. 解决思路: 本人一开始在层级上寻在了半天,未能解决问题(采用样式z-index无果),后来发现是上个开发兄弟在两个下拉框和echarts图表均使用到了样式 position:

  • 解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

    现象: 解决方法 : 1.修改全局css 2.只修改局部css .你的tableClass{ /deep/ .el-table__fixed { height: 100% !important; //设置高优先,以覆盖内联样式 } } 补充知识:解决ElementUI的Table组件固定列,在屏幕刚好够表格显示时,会出现固定列显示不全的问题 在使用ElementUI的Table组件中的固定列时,发现当表格刚好显示全,处于临界值状态时,固定列的高度(height)会于表格高度不一致,导致固定列显示

  • ant-design表单处理和常用方法及自定义验证操作

    首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator 库.百度的san-xui组件库的表单验证也是依赖与async-validator.说明这个库的实用性还是比较高,可以多了解一下. 首先按照antDesign官网Demo.我们可以copy一个Form表单的demo. LoginForm是表单的组件,下面代码,是React 高阶组件(Hoc). 用于使组件获

随机推荐

其他