#=============================更新 2020-07-27 start==================

监听页面大小变化，可以在main.js文件中使用window.addEventListener方法进行监听处理。

例如：监听页面大小变化，进行字体处理

function onResize() {

let htmlBaseFontSize = 50;

let designBodyWidth = 375;

const url = window.location.href

// loginWeb和locStatusScreenWeb页面是在web端打开，因为不需要按比例放大页面

if(url.indexOf("locStatusScreenWeb") !== -1 || url.indexOf("loginWeb") !== -1){

htmlBaseFontSize = 50;

designBodyWidth = 1920;

}

let bodyWidth = document.body.getBoundingClientRect().width;

let resultFontSize = bodyWidth / designBodyWidth * htmlBaseFontSize;

let html = document.getElementsByTagName('html')[0];

html.style.fontSize = resultFontSize + 'px';

}

window.addEventListener('resize', onResize);

onResize();

#=============================更新 2020-07-27 end==================

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

分析思路：

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

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

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

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

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

1

2

7

8

9

10 import { mapGetters } from'vuex';11 import videoDoorCtrl from'./components/videoDoorCtrl';//视频门禁信息

12 import wifiCollect from'./components/wifiCollect';//wifi数据采集

13

14 exportdefault{15 name:"deviceQueryEle",16 components:{17 videoDoorCtrl,18 wifiCollect19 },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

77

78

79

80