vue监听页面大小变化重新刷新布局

在项目中由于某些div元素在布局的时候需要初始化宽高，因为当浏览器缩小屏幕的时候需要重新刷新页面视图。

 分析思路：

　　1、在store中创建state，用于保存当前浏览器的宽、高值。

　　2、在mounted中，使用window.onresize，监听页面大小是否发生变化。若发生变化则，则this.$store.commit修改store中的的宽、高；

　　3、在computed中获取到宽高的值。由于页面宽或者高其中一个变化都需要重新进行页面视图刷新，因此在computed中进行宽高合并，只需要监听合并后的值widthOrHight既可。

　　4、在watch中监听widthOrHight，若widthOrHight发生变化，则重新初始化div的宽高。

　　　　另外，由于子组件中图表初始化的宽高是父组件的宽高，在父组件中页面视图重新发生了变化，需要子组件重新渲染视图，因此只需要给子组件定义一个key值，然后修改key值则子组件会重新初始化。　　

1 <template>
2     <div>
3       <!--省略DOM代码-->
4       <videoDoorCtrl style="height: 90%;width: 100%;background-color: rgba(2, 31, 95, 0.3);" :key="compKey.videoDoorCtrl"></videoDoorCtrl><!--里面是echarts图表-->
5       <wifiCollect style="height: 90%;width: 100%;background-color: rgba(2, 31, 95, 0.3);" :key="compKey.wifiCollect"></wifiCollect><!--里面是echarts图表-->
6     </div>
7 </template>
8
9 <script>
10   import { mapGetters } from 'vuex';
11   import videoDoorCtrl from './components/videoDoorCtrl'; // 视频门禁信息
12   import wifiCollect from './components/wifiCollect'; // wifi数据采集
13
14   export default {
15     name: "deviceQueryEle",
16     components:{
17       videoDoorCtrl,
18       wifiCollect
19     },
20
21     data() {
22       return {
23         compKey:{
24           videoDoorCtrl:3,
25           wifiCollect:6,
26         },
27       }
28     },
29     mounted() {
30       window.onresize = () => {
31         return (() => {
32           this.$store.commit('bodyWidthMut',document.body.clientWidth);
33           this.$store.commit('bodyHightMut',document.body.clientHeight);
34         })()
35       }
36     },
37     computed: {
38       ...mapGetters(['bodyWidth','bodyHeight']),
39       widthOrHight(){ // 合并宽高，只需要监听一个值变化既可
40         return [this.bodyWidth,this.bodyHeight]
41       }
42     },
43     watch: {
44       widthOrHight(){ // 监听页面宽度或者高度
45         let that = this;
46         setTimeout(function () {
47           that.initPage();  // 监听到页面size发生变化，则重新初始化div的宽高
48           const index = 10;//随便定义一个随机数
49           that.compKey.videoDoorCtrl =that.compKey.videoDoorCtrl*1+index*1;   // 需要刷新子组件的数据，只需要改变子组件的定义的key值
50           that.compKey.wifiCollect = that.compKey.wifiCollect*1+index*1;     // 需要刷新子组件的数据，只需要改变子组件的定义的key值
51         }, 400)
52       }
53     },
54     computed: {},
55     beforeCreate() {},
56     created() {},
57     methods: {
58       mapFun(param){
59       //  ……
60       },
61       initPage() {
62         let pageHig = $(window).height();
63         let pageWidth = $(window).width();
64         let pageHeaderHig = 60;
65         let pageMainHig = pageHig - pageHeaderHig;  //得出地图部分的区域
66         $("#headerID").height(pageHeaderHig);
67         $("#mainID").height(pageMainHig);
68         $("#mapLeftID").height(pageMainHig - 80);
69         $("#mapLeftID").width(pageWidth * 0.23);
70         $("#mapRightID").height(pageMainHig - 80);
71         $("#mapRightID").width(pageWidth * 0.23);
72         mapFun(this.mapParam);   // 初始化地图
73       },
74     }
75   }
76 </script>
77
78 <style rel="stylesheet/scss" lang="scss" scoped>
79
80 </style>