1. 程式人生 > >vue元件中的樣式屬性scoped例項

vue元件中的樣式屬性scoped例項

vue元件中的style標籤標有scoped屬性時表明style裡的css樣式只適用於當前元件元素 。接下來通過本文給大家分享vue元件中的樣式屬性scoped例項詳解

**Scoped CSS**

Scoped CSS規範是Web元件產生不汙染其他元件,也不被其他元件汙染的CSS規範。

vue元件中的style標籤標有scoped屬性時表明style裡的css樣式只適用於當前元件元素
 它是通過使用PostCSS來改變以下內容實現的:

<style scoped>  
.example {  
 color: red;  
}  
</style>  
   
<template>  
 <div class="example">hi</div>  
</template>  

渲染結果:

<style>  
.example\[data-v-f3f3eg9\] {  
 color: red;  
}  
</style>  
   
<template>  
 <div class="example" data-v-f3f3eg9>hi</div>  
</template>  

混合使用全域性屬性和區域性屬性

<style>  
/\* global styles */  
</style>  
   
<style scoped>  
/\* local styles */  
</style>  

關於子元件的根元素

使用了scoped屬性之後,父元件的style樣式將不會滲透到子元件中,然而子元件的根節點元素會同時被設定了scoped的父css樣式和設定了scoped的子css樣式影響,這麼設計的目的是父元件可以對子元件根元素進行佈局。  .vue模板中的樣式是根據需要按需載入,訪問一個頁面該元件中的樣式就會追加到head標籤中,如果父子元件中都對某個子元件根節點元素進行了控制,則父元件裡的樣式會被後來的覆蓋。

深選擇器
如果想對設定了scoped的子元件裡的元素進行控制可以使用'>>>'或者'deep'

<template>  
 <div id="app">  
  <gHeader></gHeader>  
 </div>  
</template>  
   
<style lang="css" scoped>  
 .gHeader /deep/ .name{ //第一種寫法  
  color:red;  
 }  
 .gHeader >>> .name{  //二種寫法  
  color:red;  
//歡迎加入全棧開發交流圈一起學習交流:864305860  
//面向1-3年前端人員  
//幫助突破技術瓶頸,提升思維能力  
 }  
</style>  
   
<div class="gHeader">  
 <div class="name"></div>  
</div>  

一些預處理程式例如sass不能解析>>>屬性,這種情況下可以用deep,它是>>>的別名,工作原理相同。
動態生成的內容
使用v-html動態建立的DOM內容,不受設定scoped的樣式影響,但你依然可以使用深選擇器進行控制
下面給大家補充下vue中使用v-html載入的富文字,css中定義樣式不生效
如題,使用v-html載入一段富文字,富文本里包含圖片,在手機上圖片寬度可能會溢位

<div v-html="htmlContent" class="rich"></div>   
<style scope>  
.rich>>> img{ display:block; max-width: 100%}  
</style>  

注意:這裡的>>>需要使用css語法,寫在less裡會報錯

結語

感謝您的觀看,如有不足之處,歡迎批評指正。