vue中監聽window.resize的變化


 

   我只想說每個人遇到的bug真的不能一概而論,解決辦法也會有不同。在vue中使用echarts的時候,會想要實現window.resize窗體變化大小的時候讓圖形大小跟着變化。實現的過程中各種bug,也真的讓人有種想要發狂的感覺。但是還好,最后在不斷的查資料和嘗試當中。實現了想要的效果,僅供參考:

     首先我這里實現的效果是切換echart圖形,然后在window.resize過程中想要實現自適應窗口大小的變化。

  這里的兩個button分別是控制兩個路由切換,也就是兩個echart圖形(柱狀圖和餅圖)

首先實現這兩個圖形的option設置這里就不進行展示了,在官網上有許多的例子,可供參考。

  (1)圖形的container<div id='echart'></div>  我把寬高設置為充滿父容器。所以你需要確保你的圖形容器在切換的時候要有寬高。在我的另外一篇隨筆中有寫到利用js實現echarts切換的時候,會涉及到當echarts的display為none的時候,再次顯示之前,需要去計算並賦值給圖形容器,不然圖形沒有寬度或者高度會導致無法展示。

  (2)

 在methods方法中寫了一個實現柱狀圖的過程方法:createBar。

在掛載的時候去調用該方法,就實現了基本的圖形。但是這個時候還沒有涉及到當window  resize的時候,圖形的大小不會跟隨改變。這個時候就需要監聽window.resize變化:

完整的mounted階段。這里面使用到了jquery,需要引入jquery。具體的可以全局<script>引入,也可以把jquery當做插件進行引入<需要在webpack中配置>,網絡上有許多配置的例子。

到這里就可以完成window.resize的監聽並且圖形可以 變化了。

  或許這個方法不太優,但是不失為一種方式。如果大家有更好的實現方法當然也可以進行分享。分享使你快樂。哈哈~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM