汕头网站建设设计公司,硬件开发外包平台,免费制作视频,枫林seo文章目录 一、前言1.1、/deep/1.2、::v-deep1.3、 二、区别三、总结四、最后 一、前言
1.1、/deep/
在style经常用scoped属性实现组件的私有化时#xff0c;要改变element-ui某个深层元素#xff08;例如.el-input__inner#xff09;或其他深层样式时#xf… 文章目录 一、前言1.1、/deep/1.2、::v-deep1.3、 二、区别三、总结四、最后 一、前言
1.1、/deep/
在style经常用scoped属性实现组件的私有化时要改变element-ui某个深层元素例如.el-input__inner或其他深层样式时需要使用/deep/如
.conBox /deep/ .el-input__inner{padding:0 10px;
}注意/deep/在vue 3.0会报错 1.2、::v-deep
如果/deep/报错可采用::v-deep效果基本一样有人说::v-deep能加快编译速度但是我在网上没有找到相关资料无从验证。
.conBox ::v-deep .el-input__inner{padding:0 10px;
}1.3、
深度作用选择器 只作用于css 但如果是sass/less的话可能无法识别这时候需要使用 /deep/和::v-deep 选择器。 想修改element-ui某个深层元素也有其他方式解决 解决方法之一除非你将 scoped 移除或者新建一个没有 scoped 的 style一个.vue文件允许多个style
二、区别 原生css支持sass/less的话可能无法识别 /deep/sass/less可识别/deep/在vue 3.0会报错 (未实际考察有待验证) ::v-deepvue 3.0支持编译速度快 未实际考察有待验证 三、总结
个人推荐vue element-ui项目使用::v-deep修改样式
四、最后
本人每篇文章都是一字一句码出来希望对大家有所帮助多提提意见。顺手来个三连击点赞收藏关注✨一起加油☕
