本篇文章給大家分享的是有關(guān)使用vue-cl如何局部修改Element樣式，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)于2013年開(kāi)始，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元肇慶做網(wǎng)站,已為上家服務(wù),為肇慶各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話(huà):18980820575

代碼如下：

效果：

　　現(xiàn)在我想把藍(lán)色字體改為其他顏色，但是我發(fā)現(xiàn)無(wú)論我如何修改樣式，界面始終沒(méi)有任何變化，所以我想到可能是需要覆蓋Element默認(rèn)的el-switch樣式。于是，我找呀找，找呀找，終于在node_modules/element-ui/lib/theme-chalk下找到了對(duì)應(yīng)的默認(rèn)樣式，如下所示：

Element默認(rèn)樣式：

　　于是，我想著把，這下問(wèn)題能解決了，我開(kāi)開(kāi)心心地在自己的組件里把對(duì)應(yīng)的樣式覆蓋了：

　　我雞凍的點(diǎn)了一下刷新，發(fā)現(xiàn)并沒(méi)有什么卵用，還是以前熟悉的面孔：

　　我不服氣，繼續(xù)百度，似乎看到一絲曙光，按照網(wǎng)上說(shuō)的，在樣式的color后面加了 !important ，然后心情美麗地刷新了一下，還是老樣子，我一個(gè)七尺男兒簡(jiǎn)直想哭，崩了.....

　　我仍不死心，繼續(xù)找度娘，終于老天不負(fù)有心人，我get到了我的寶貝，把樣式單獨(dú)寫(xiě)在外面就成功了。

　　驚喜之余，我發(fā)現(xiàn)，這種修改方式存在一個(gè)bug，那就是其他頁(yè)面的樣式同時(shí)也會(huì)被修改成這種樣式。我忽的想起，style標(biāo)簽上添加的scoped屬性，是表示它的樣式作用于當(dāng)下的模塊，很好的實(shí)現(xiàn)了樣式私有化的目的。如果不加scoped屬性，這個(gè)樣式就具有全局屬性。因此，一旦在不加scoped屬性的情況下，樣式被覆蓋，那么整個(gè)項(xiàng)目使用到該標(biāo)簽時(shí)的樣式都會(huì)跟著被覆蓋。

　　所以問(wèn)題又來(lái)了，如何讓該覆蓋樣式只在當(dāng)下組件起作用呢？問(wèn)誰(shuí)呢？繼續(xù)找度娘唄.......(才疏學(xué)淺，只會(huì)度娘....)，找啊找，找啊找，費(fèi)了好大勁，終于找到了答案。就是簡(jiǎn)單地用scoped和>>>符號(hào)進(jìn)行穿透。何謂穿透？(引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。這時(shí)就要通過(guò)特殊的方式，來(lái)穿透scoped。)

　　最后大功告成，如下：

注意：

1.這里的  >>> 可以用 /deep/ 替換掉，這里的 /deep/ 操作符是 >>> 的別名，同樣也可以正常工作。

2.這里的 !important 不加其實(shí)也沒(méi)毛病，但是因?yàn)檫@是使用第三方庫(kù)的樣式，所以在覆蓋樣式時(shí)最好加上 !important ，這樣才能指明優(yōu)先級(jí)。

以上就是使用vue-cl如何局部修改Element樣式，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

當(dāng)前標(biāo)題：使用vue-cl如何局部修改Element樣式-創(chuàng)新互聯(lián)
分享路徑：http://jinyejixie.com/article18/heigp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、電子商務(wù)、軟件開(kāi)發(fā)、網(wǎng)站排名、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)