::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;
	}

完美解决!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值