解決vue scoped html樣式無效的問題
1、問題場景
page1,page2都使用flexible移動端自適應的時候,有一個頁面page2需要手動設定rem基準值,
//手動設定基準 html{ font-size: 120px !important; }
但是在page2引用的self.less裡面設定了基準,竟然沒有生效
2、問題分析scoped屬性
在引用self.less的時候,使用了屬性scoped
vue中引入了scoped這個概念,設計思想就是讓當前元件的樣式不會修改到其他頁面的樣式,使用了data-v-hash的方式來使css有了他對應的模組的標識,通俗來說就是使用了scoped屬性,template裡面的html都會多一個data-v-hash的屬性,css 選擇器會根據data-v-hash來進行選擇,當前的css檔案只會對當前的頁面生效。參考下圖
那麼問題來了,scoped只對當前元件裡面的內容生效,會對元件裡面的dom加data-v-hash屬性,而不會對html,body等元件之外的dom新增,但是css裡面的屬性選擇器都是data-v-hash屬性的,參考下圖,橢圓形裡面是元件之外的,沒有data-v-hash屬性,所以加了scoped屬性的css會對元件外無效。長方形裡面的dom是元件裡面的,data-v-hash跟css裡面的data-v-hash是一致的會生效。
雖然css裡面的body選擇器也添加了data-v-hash,但是頁面dom沒有data-v-hash屬性,所以css裡面設定的body樣式無效。
3、解決辦法
針對必須設定屬性scoped的元件,可以在page2.vue裡面再單獨寫一個style,在頁面裡面單獨寫元件之外(html,body等)的樣式,因為scoped不會對元件之外的dom增加data-v-hash屬性
但是新問題來了,page2設定以後,影響了page1頁面的佈局,page1頁面html的的font-size樣式依然是120px,
當然會影響啊,page2也引用了page1的樣式啊,但是page2設定了scoped,所以只有page2的html樣式會影響page1,
解決辦法就是再vue什麼週期create裡面,用js給html設定font-size
4、總結
遇到了這問題,終於搞明白了scoped染渲染規則,在添加了scoped屬性的元件
給元件(template)裡面的dom節點,加了一共不重複屬性的data-v-hash,來標誌唯一性
給元件裡面引用的的樣式檔案,在每個選擇器後面添加了一個等同於dom節點一樣的data-v-hash欄位,實現類似於作用域的問題,不影響全域性
如果元件裡面還有元件,只會給最外層的元件裡面dom,新增data-v-hash,不會影響元件內部引用的元件
補充知識:vue中scoped慎用
scoped表示當前style屬性只屬於當前模組
實現原理:
vue通過在DOM結構以及css樣式上加上唯一的標記 data-v-469af010,保證唯一,
問題:
1.父元件無scoped屬性,子元件帶有scoped,父元件是無法操作子元件的樣式的(原因在原理中可知),雖然我們可以在全域性中通過該類標籤的標籤選擇器設定樣式,但會影響到其他元件
2.父元件有scoped屬性,子元件無,父元件也無法設定子元件樣式,因為父元件的所有標籤都會帶有data-v-469af010唯一標誌,但子元件不會帶有這個唯一標誌屬性,與1同理,雖然我們可以在全域性中通過該類標籤的標籤選擇器設定樣式,但會影響到其他元件
3.父子組建都有,同理也無法設定樣式,更改起來增加程式碼量
因此如果元件內部還有元件,只會給最外層的元件裡的標籤加上唯一屬性欄位,不影響元件內部引用的元件( 注意 )
方案:
1.混合使用全域性屬性和區域性屬性
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
2.深選擇器
<template> <div id="app"> <gHeader></gHeader> </div> </template> <style lang="css" scoped> .gHeader /deep/ .name{ //第一種寫法 color:red; } .gHeader >>> .name{ //二種寫法 color:red; } </style>
以上這篇解決vue scoped html樣式無效的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。