成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[新手坑] 01.Vue模板內(nèi)引入的組件樣式覆蓋失效

Pines_Cheng / 816人閱讀

摘要：新手坑模板內(nèi)引入的組件樣式覆蓋失效作為一名剛接觸的菜鳥開發(fā)過程中遇到一些小坑又很難搜索的到還是記錄下來分享給有遇到過類似問題的人項(xiàng)目中假設(shè)用到這個(gè)庫(kù)具體引入組件啥的我就不詳細(xì)說了直接看代碼以上代碼的寫法不仔細(xì)看的話通過頁(yè)面來看組

[新手坑] 01.Vue模板內(nèi)引入的組件樣式覆蓋失效 
作為一名剛接觸Vue的菜鳥, 開發(fā)過程中遇到一些小坑又很難搜索的到, 還是記錄下來. 分享給有遇到過類似問題的人.

Vue項(xiàng)目中假設(shè)用到Vant.js這個(gè)UI庫(kù), 具體引入組件啥的我就不詳細(xì)說了, 直接看代碼:

以上代碼的寫法不仔細(xì)看的話, 通過頁(yè)面來看, my-btn組件實(shí)際上是Button, 而Vant的Button會(huì)生成類似如下:

其中的van-button的確寬度變成600px了, 而這個(gè)van-button__text卻沒有反應(yīng). 似乎一下子就傻眼了. 去掉scoped才有效果, 可是為啥要把這個(gè)作用域去了才行. 這個(gè)不符合我們需求, 因?yàn)檫@樣會(huì)造成全局污染. 我僅僅是想要在這個(gè)頁(yè)面中的按鈕文本字體發(fā)生改變!

問題原因

scoped是必不可少的, 但是我寫了這個(gè)樣式為何無法生效? 原因很簡(jiǎn)單, 因?yàn)楫?dāng)前樣式僅適用于當(dāng)前Vue模板的, 而模板中引入的其他組件其實(shí)是無法被渲染的.

解決方案

因此對(duì)于模板中引入第三方UI框架的樣式如何改寫, 正確方式是寫一個(gè)優(yōu)先級(jí)高于原組件的全局樣式來覆蓋默認(rèn)樣式, 比如

{{msg}}

完整的代碼如下

當(dāng)然這里只是示例, 個(gè)人并不建議在模板上寫多個(gè)style塊, 所以我的做法一般還是在assets目錄內(nèi)新建一個(gè)例如resetui.css文件, 專門存放這些需要被重新修改的樣式代碼. 并且以組件的類名來進(jìn)行維護(hù), 比如上面一段, 最后處理好的代碼應(yīng)該是引入一個(gè)全局resetui.css, 并且該文件內(nèi)的樣式(我用了PostCSS)例如:

.login {
  .van-button__text {
    font-size: 40px;
  }
}

這樣就很好的解決了作用域和組件樣式的問題了, 因此理解Vue模板和組件之間的作用域也是至關(guān)重要的~

其實(shí)這部分內(nèi)容在官方文檔有寫, 不過大部分新手在閱讀文檔后, 并沒有真正實(shí)踐, 所以也就很容易忽略, 這里簡(jiǎn)單的做了個(gè)總結(jié), 希望大家能夠注意哦~
我其實(shí)也很想能夠做到, 當(dāng)前模版內(nèi)的scoped樣式能夠生效于當(dāng)前模版內(nèi)的所有組件的辦法, 不過似乎是做不到的? 因此目前還是暫時(shí)按照上面的解決方案處理吧~

參閱: 官方文檔 - Class與Style綁定 - 用在組件上

我了更好的學(xué)習(xí)Vue-cli, 我在GitHub上建了一個(gè)vue-cli-mobile-study項(xiàng)目, 用于記錄一些小技巧和坑, 其中記錄過程中如果有問題, 也希望大家指出包涵~

下期: 02.Vue開發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113092.html

相關(guān)文章

  • [新手坑] 02.Vue開發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問題

    摘要：新手坑開發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問題上次提到作用域問題導(dǎo)致樣是不生效這次講的是我之前遇到的一個(gè)小坑稍不留神就完蛋前陣子做的一個(gè)小項(xiàng)目引入了的庫(kù)外加自己寫的很多樣式在開發(fā)環(huán)境下測(cè)試完美直接就出來上正式環(huán)境發(fā)現(xiàn)竟然有多處樣式未生效的問題還好 [新手坑] 02.Vue開發(fā)環(huán)境和生產(chǎn)環(huán)境樣式不一致的問題 上次提到作用域問題, 導(dǎo)致樣是不生效, 這次講的是我之前遇到的一個(gè)小坑, 稍不留神就完...

    RdouTyping 評(píng)論0 收藏0

  • 小程序采坑記

    摘要：小程序采坑記上手小程序兩個(gè)月，多多少少遇到一些坑，在此簡(jiǎn)單地作下總結(jié)。但一些人可能會(huì)遇過這種情況已知小程序組件默認(rèn)高度，如果子元素高度過高，不會(huì)自適應(yīng)高度。但實(shí)際上真是這樣嗎其實(shí)小程序的組件表現(xiàn)挺奇怪的。擅長(zhǎng)微信小程序開發(fā)，系統(tǒng)管理后臺(tái)。 小程序采坑記 上手小程序兩個(gè)月，多多少少遇到一些坑，在此簡(jiǎn)單地作下總結(jié)。希望能對(duì)那些跟我一樣有遇到過同樣問題的人提供一點(diǎn)幫助，避免掉進(jìn)這些坑，少走一...

    miya 評(píng)論0 收藏0

  • Next.js踩坑入門系列（二）— 添加Antd && CSS

    摘要：踩坑入門系列一二添加三目錄重構(gòu)再談路由陸續(xù)更新個(gè)人對(duì)于腳手架的有一種執(zhí)念，如果搭建出來就是一個(gè)首頁(yè)標(biāo)簽跳轉(zhuǎn)，實(shí)在不是我這個(gè)處女座的風(fēng)格，因此第二步我就想引用框架，相信很多使用的開發(fā)者用的也都是這個(gè)框架吧。 Next.js踩坑入門系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目錄重構(gòu)&&再談路由 陸續(xù)更新... 個(gè)人對(duì)于腳手架的UI有一種執(zhí)...

    lifesimple 評(píng)論0 收藏0

  • 如何在前端項(xiàng)目中實(shí)現(xiàn)熱更新

    摘要：如果你的項(xiàng)目中使用了的話，你會(huì)很幸運(yùn)，借助插件可以實(shí)現(xiàn)項(xiàng)目的熱更新。對(duì)模板更新的處理目前項(xiàng)目中使用的是的模板引擎。 showImg(https://segmentfault.com/img/bVrAa7);這個(gè)是組內(nèi)一位同學(xué)在平時(shí)開發(fā)中，發(fā)現(xiàn)調(diào)試不便，為團(tuán)隊(duì)開發(fā)的熱更新工具。很厲害，文章中的技術(shù)實(shí)現(xiàn)內(nèi)容也是我了解了他的具體實(shí)現(xiàn)思路后，整理出來的。 工具源碼EHU(esl-hot-upd...

    antz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<