Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

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

紫藤萝yu 2019-01-24 14:53:00 阅读数:299 评论数:0 点赞数:0 收藏数:0

在项目中由于某些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>

 

版权声明
本文为[紫藤萝yu]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/luoxuemei/p/10314221.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领