国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Pines_Cheng / 807人閱讀

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

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

Vue項目中假設用到Vant.js這個UI庫, 具體引入組件啥的我就不詳細說了, 直接看代碼:

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

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

問題原因

scoped是必不可少的, 但是我寫了這個樣式為何無法生效? 原因很簡單, 因為當前樣式僅適用于當前Vue模板的, 而模板中引入的其他組件其實是無法被渲染的.

解決方案

因此對于模板中引入第三方UI框架的樣式如何改寫, 正確方式是寫一個優先級高于原組件的全局樣式來覆蓋默認樣式, 比如

{{msg}}

完整的代碼如下

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

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

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

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

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

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

下期: 02.Vue開發環境和生產環境樣式不一致的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113092.html

相關文章

  • [新手坑] 02.Vue開發環境和生產環境樣式不一致的問題

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

    RdouTyping 評論0 收藏0

  • 小程序采坑記

    摘要：小程序采坑記上手小程序兩個月，多多少少遇到一些坑，在此簡單地作下總結。但一些人可能會遇過這種情況已知小程序組件默認高度，如果子元素高度過高，不會自適應高度。但實際上真是這樣嗎其實小程序的組件表現挺奇怪的。擅長微信小程序開發，系統管理后臺。 小程序采坑記 上手小程序兩個月，多多少少遇到一些坑，在此簡單地作下總結。希望能對那些跟我一樣有遇到過同樣問題的人提供一點幫助，避免掉進這些坑，少走一...

    miya 評論0 收藏0

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

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

    lifesimple 評論0 收藏0

  • 如何在前端項目中實現熱更新

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

    antz 評論0 收藏0

發表評論

0條評論

Pines_Cheng

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<