資訊專欄INFORMATION COLUMN
摘要：文件中標(biāo)簽的幾個標(biāo)識符在人生就要絕望的時候被編輯器所提示的一個所拯救臥槽寫到最后才發(fā)現(xiàn)這個屬性的具體卵用詳情見最后解決辦法問題背景問題由來項目中使用了框架與文件現(xiàn)狀中使用類名進(jìn)行了樣式的綁定個人認(rèn)為使用這種方式的綁定寫起來很麻煩不僅僅是麻煩
.vue文件中style標(biāo)簽的幾個標(biāo)識符
在人生就要絕望的時候, 被編輯器所提示的一個scopedSlots所拯救.問題背景 問題由來
臥槽, 寫到最后才發(fā)現(xiàn)這個屬性的具體卵用. 詳情見最后解決辦法.
項目中使用了elementUI框架, 與.vue文件.
現(xiàn)狀: 中使用$style:[類名], 陷入點
不知道清楚再style中使用了module這個屬性的具體含義
dev啟動環(huán)境下, 使用scoped形成獨立作用域后, 并不能影響到elemnt中組件的樣式.
使用scopedSlots標(biāo)識style標(biāo)簽后, 解決問題. 但出現(xiàn) dev環(huán)境正常, 部署后, 不起作用
問題詳解 認(rèn)識.vue的可以在js中通過console.log(this.$style.red)進(jìn)行訪問
可以使用module=""來更改$style這個名稱
scoped的作用域是如何的
當(dāng)標(biāo)簽有scoped屬性的時候, 他的css樣式只作用在當(dāng)前作用域
使用了scoped之后, 父組件的樣式不會再深入到自組件.
不過子組件的根節(jié)點同時受到 父組件有作用域的CSS 和 子組件有作用域的影響
但是有一點: 如果我們在子組件上面添加了一個類樣式 就能向下一層層的進(jìn)行修改
深度作用選擇器: >>> 或者是 /deep/
已驗證: 在less下面不起作用
已驗證: 在普通的css下才起作用.
據(jù)網(wǎng)上說, stylus起作用, scss不起作用, 并未驗證
v-html動態(tài)生成的樣式不受作用域內(nèi)樣式影響, 但我想應(yīng)該加個類樣式名稱,可以解決.(未驗證)
css的作用域的渲染方式, 遠(yuǎn)不如class的渲染速度
遞歸組件中, 小心使用CSS樣式.
element中樣式的混入方式 (todo)通過打包進(jìn)行樣式的使用, 故使用方式在build的文件夾中
樣式目錄為: element/packages/theme-chalk/src/menu.scss, 以方便后期的具體查看
解決過程 使用scopedSlots解決我擦哦, 再次測試后, 發(fā)現(xiàn)添加scopedSlots并沒有什么卵用, 和什么都不寫是他媽一個樣子啊.. 我說怎么, 怎么查了半天, 也沒人用.添加scoped之后, 在子組件上面添加類樣式名, 發(fā)現(xiàn)并沒有卵用
還被這玩意所拯救, 也真是夠了..
當(dāng)時還驕傲了半天, 還以為是發(fā)現(xiàn)了新天地, 也真是6了.
錯誤依舊: 只是在表面層上的有一些data-v的注入
沒有找到需要注入到里面的條件, 發(fā)現(xiàn)自己前面大部分的判斷都是錯誤的.
解決方案一: scoped方案將無法進(jìn)行樣式覆蓋的部分拿出來
使用原生的css樣式, 添加scoped
使用 >>> 語法糖進(jìn)行樣式的注入
解決方案二: module方案使用module進(jìn)行屬性的選擇
然后是用:global()進(jìn)行這個屬性下面的全部選擇
進(jìn)而選中這個沒有在作用域下面但是可以選擇到的元素
個人始終認(rèn)為這種選擇方案, 可以做到css作用域的區(qū)分, 但是, 并不靈活
具體的以后再分析
總結(jié).vue文件中的只有module和scoped, 沒有其他取巧方案
module形成一個代表屬性的計算屬性, 默認(rèn)名稱為$style, 其中的:global()可以進(jìn)行這個區(qū)域下面的所有元素的選擇.
scoped形成的作用域, 可以通過>>>來進(jìn)行子組件的樣式覆蓋, 帶只要原生的css支持.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96184.html
摘要：最常見的用法，是用來鏈接一個外部的樣式表，比如標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能?？梢詭椭覀兲岣唔撁娴男阅?。 寫在前面 本文首發(fā)于公眾號：符合預(yù)期的CoyPan HTML 中元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。最常見的用法，是用來鏈接一個外部的樣式表，比如： link標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能。 link標(biāo)簽的使用 來看一下link標(biāo)簽除了鏈接外...
摘要：最常見的用法，是用來鏈接一個外部的樣式表，比如標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能?？梢詭椭覀兲岣唔撁娴男阅堋? 寫在前面 本文首發(fā)于公眾號：符合預(yù)期的CoyPan HTML 中元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。最常見的用法，是用來鏈接一個外部的樣式表，比如： link標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能。 link標(biāo)簽的使用 來看一下link標(biāo)簽除了鏈接外...
摘要：隨著承擔(dān)地職責(zé)越來越大，模塊化開發(fā)的需求越來越急迫。我們可以把當(dāng)成是模塊化標(biāo)準(zhǔn)的實現(xiàn)方案，但的功能不僅限于此。支持多種模塊使用方式，包括的。下面介紹一下在工程中常用的。最后一個的輸出就是我們最終要的結(jié)果。在文件有值的情況下，是必要的。 由于web應(yīng)用擴(kuò)展地得極其迅猛，前端技術(shù)也是日新月異，前端的苦不是有多難學(xué)，而是我剛學(xué)完，這東西就被淘汰了（手動哭臉）?？蚣芊矫嫖覀冇衯ue、react...
摘要：前言最近在研究使用的使用在查閱了數(shù)篇文章后學(xué)習(xí)了的基礎(chǔ)打包流程本來就可以一刪了之了但是覺得未免有點可惜所以就有了這篇文章供大家參考打包的教程具有時效性有不少作者在一直維護(hù)一篇文章超過一定時間參考價值就會下降希望各位了解這一點使用的依賴一覽 前言 最近在研究使用webpack的使用,在查閱了數(shù)篇文章后,學(xué)習(xí)了webpack的基礎(chǔ)打包流程. 本來就可以一刪了之了,但是覺得未免有點可惜,所以...
摘要：多頁面跳轉(zhuǎn)之前看過有相關(guān)朋友了空的多頁面腳手架不過了幾個都是或者的剛好項目需要用到就在的基礎(chǔ)上進(jìn)行了修改已經(jīng)有直接用即可如果需要修改配置的請到里面修改并且全局引了如果不需要或者不喜歡請到里面修改多頁面空腳手架鏈接如果需要路由版的在的另外一 vue2.* (多頁面跳轉(zhuǎn)) @[vue2.3.3|webpack2.6.1|less|axios] 之前看過有相關(guān)朋友share了空的多頁面腳...
閱讀 1370·2021-09-27 13:56
閱讀 2399·2019-08-26 10:35
閱讀 3555·2019-08-23 15:53
閱讀 1903·2019-08-23 14:42
閱讀 1276·2019-08-23 14:33
閱讀 3615·2019-08-23 12:36
閱讀 2022·2019-08-22 18:46
閱讀 1051·2019-08-22 14:06
