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的監聽而且圖形能夠 變化了。

  或許這個方法不太優，可是不失爲一種方式。若是你們有更好的實現方法固然也能夠進行分享。分享使你快樂。哈哈~~