::v-deep 是 Vue 中用于 样式穿透(深度选择器) 的语法
1. 基本作用
Scoped CSS 的局限性:
默认情况下,Vue 的<style scoped>
会给当前组件的 DOM 和 CSS 添加data-v-xxxxxx
属性(如[data-v-7d5a6316]
),限制样式仅对当前组件生效。
但如果你需要修改子组件(如第三方组件uni-fab
)的内部样式,直接写选择器无效。::v-deep 的解决方案:
通过::v-deep
可以穿透 scoped 限制,让样式作用于子组件的内部元素。
具体示例:
在 h5浏览器中element 元素属性css我找到.uni-fab__circle--rightBottom[data-v-7d5a6316] 我如何在代码中控制这种属性的样式 代码是 <uni-fab>组件
.uni-fab__circle--rightBottom[data-v-7d5a6316] {right: 15px;bottom: 30px;right: calc(17px + var(--window-right));bottom: calc(50px + var(--window-bottom));
}
在页面中css 你直接复制修改其中样式 是无效的,此时就需要用到::v-deep
::v-deep .uni-fab__circle--rightBottom {bottom: 50px !important;}
完美解决!