/deep/ >>> ::v-deep的用法
而/deep/ 和 ::v-deep的区别是 vue2中使用::v-deepvue3中使用/deep/样式如果是sass/less 用>>>选择器无效 要选择/deep/ 或者 ::v-deep。//举例1:vue2中去除element-table中表格使用固定列下方出现的一条线。//举例2:vue2中el-dialog里面的form-item改变间距。//举例3 直接不使用::v-deep /d
·
/deep/ >>> ::v-deep三个都是深度作用选择器
一般是由于出现scoped属性实现组件样式私有化,导致样式只出现在表层 无法深入渲染嵌套在内的盒子,因此需要外层盒子使用到深度作用选择器,来使外层盒子与内层样式保持一致
三者之间最大的用法区别是:
样式如果是sass/less 用>>>选择器无效 要选择/deep/ 或者 ::v-deep
而/deep/ 和 ::v-deep的区别是 vue2中使用::v-deep vue3中使用/deep/
//举例1:vue2中去除element-table中表格使用固定列下方出现的一条线
.tabledata{//包裹eltable的父元素
.el-table::before {
height: 0;
}
::v-deep.el-table__fixed-right::before {
height: 0;
}
}
//举例2:vue2中el-dialog里面的form-item改变间距
(最后的确认取消按钮也是一个el-form-item)
::v-deep.el-form-item:last-child {
margin-top: 30px;
}//因为这个el组件是在Header组件里用到的 Header里的style写了scoped属性 所以要用到::v-deep
//举例3 直接不使用::v-deep /deep/ >>>
没写scoped的
style属性样式就可以影响到该组件及其子孙组件
更多推荐
已为社区贡献1条内容
所有评论(0)