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