在项目中出现的问题:
在引用UI组件输入框 <el-autocomplete> 时,样式出现了如下问题,边距多了1px导致输入框与边框分离。
根据我之前的经验,只要改变其外部样式就可以了。在此之前我都是选用less预处理器,然后使用 /deep/ 深度选择器修改第三库引入的组件。但是修改失败。
解决:
经过查了大量博客,发现我当前选用的时scss预处理器,那么只能用 ::v-deep
::v-deep .el-input__wrapper {
padding: 0;
}
总结三者的区别:
>>>
深度作用选择器的简写形式
- 只作用于css,不支持css预加载器(less/scss)
- 是
/deep/
的简写形式,适用于Vue2.x版本,Vue3.x版本使用会报错
/deep/
Vue2.x的深度作用选择器正式写法
- 仅适用于Vue2.x版本
- 支持css预加载器
::v-deep
Vue3.x的深度作用选择器正式写法
总结
Vue2.x版本使用优先级 /deep/
> >>>
Vue3版本使用::v-deep