欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解vue樣式穿透的幾種方式

 更新時(shí)間：2022年06月29日 10:44:04   作者：汪鴻的好朋友  
本文主要介紹了vue樣式穿透的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

scoped屬性

我們?cè)趘ue組件寫樣式一般是在<style>標(biāo)簽里面，但是我們?cè)谶@里的樣式默認(rèn)是全局樣式，如果其它組件的class名取重復(fù)了則會(huì)導(dǎo)致樣式污染。

所以vue支持在<style>標(biāo)簽添加scoped屬性，這樣當(dāng)前組件的樣式只會(huì)在當(dāng)前樣式生效，其它組件不會(huì)影響到。

例子如下：

<div class="page">
  <span class="content">hello world</span>
</div>
<style lang="scss" scoped> .page {
  .content {
    color: aquamarine;
    font-size: 20px;
  }
} </style>

最終在瀏覽器渲染出來，div和span上都帶有特殊屬性

image.png

然后css的樣式最終也會(huì)帶上這些屬性，根據(jù)這些屬性找到元素。

image.png

這樣子避免樣式全局污染。

如果你的引入了第三方庫，如果你想修改第三方庫的樣式，直接通過dom查找，修改樣式是沒有效果的。

比如我在項(xiàng)目引入了餓了么的組件庫elementUI。

<el-card class="box-card">
  <span class="content">hello world</span>
</el-card>

image.png

如果我們想把padding改小一點(diǎn),下面這樣寫是沒有效果的。

<style lang="scss" scoped> .box-card {
  .el-card__body {
    padding: 10px;
  }
} </style>

只看到默認(rèn)的padding。我們寫的樣式?jīng)]有渲染出來。

image.png

此時(shí)需要樣式穿透，需要用到深度選擇器/deep/。

<style lang="scss" scoped> .box-card {
  /deep/.el-card__body {
    padding: 10px;
  }
} </style>

image.png

可以看到生效了。

樣式穿透

vue都是通過深度選擇器來樣式穿透的。除了上面的講/deep/，我熟知的還有::v-deep，>>>。

那它們有何區(qū)別？

  • 如果你使用的是css，沒有使用css預(yù)處理器，則可以使用>>>，/deep/，::v-deep。
  • 如果你使用的是less或者node-sass，那么可以使用/deep/，::v-deep都可以生效。
  • 如果你使用的是dart-sass，那么就不能使用/deep/，而是使用::v-deep才會(huì)生效。

總結(jié)

總結(jié)一下：

  • css可以使用>>>，/deep/，::v-deep
  • less和node-sass可以使用/deep/，::v-deep
  • dart-sass可以使用::v-deep

到此這篇關(guān)于詳解vue樣式穿透的幾種方式的文章就介紹到這了,更多相關(guān)vue樣式穿透內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論