vue監聽頁面大小變化重新刷新布局

#=============================更新 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值則子組件會重新初始化。　　

<template>
    <div>
      <!--省略DOM代碼-->
      <videoDoorCtrl style="height: 90%;width: 100%;background-color: rgba(2, 31, 95, 0.3);" :key="compKey.videoDoorCtrl"></videoDoorCtrl><!--里面是echarts圖表-->
      <wifiCollect style="height: 90%;width: 100%;background-color: rgba(2, 31, 95, 0.3);" :key="compKey.wifiCollect"></wifiCollect><!--里面是echarts圖表-->
    </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import videoDoorCtrl from './components/videoDoorCtrl'; // 視頻門禁信息
  import wifiCollect from './components/wifiCollect'; // wifi數據采集

  export default {
    name: "deviceQueryEle",
    components:{
      videoDoorCtrl,
      wifiCollect
    },

    data() {
      return {
        compKey:{
          videoDoorCtrl:3,
          wifiCollect:6,
        },
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.$store.commit('bodyWidthMut',document.body.clientWidth);
          this.$store.commit('bodyHightMut',document.body.clientHeight);
        })()
      }
    },
    computed: {
      ...mapGetters(['bodyWidth','bodyHeight']),
      widthOrHight(){ // 合並寬高，只需要監聽一個值變化既可
        return [this.bodyWidth,this.bodyHeight]
      }
    },
    watch: {
      widthOrHight(){ // 監聽頁面寬度或者高度
        let that = this;
        setTimeout(function () {
          that.initPage();  // 監聽到頁面size發生變化，則重新初始化div的寬高
          const index = 10;//隨便定義一個隨機數
          that.compKey.videoDoorCtrl =that.compKey.videoDoorCtrl*1+index*1;   // 需要刷新子組件的數據，只需要改變子組件的定義的key值
          that.compKey.wifiCollect = that.compKey.wifiCollect*1+index*1;     // 需要刷新子組件的數據，只需要改變子組件的定義的key值
        }, 400)
      }
    },
    computed: {},
    beforeCreate() {},
    created() {},
    methods: {
      mapFun(param){
      //  ……
      },
      initPage() {
        let pageHig = $(window).height();
        let pageWidth = $(window).width();
        let pageHeaderHig = 60;
        let pageMainHig = pageHig - pageHeaderHig;  //得出地圖部分的區域
        $("#headerID").height(pageHeaderHig);
        $("#mainID").height(pageMainHig);
        $("#mapLeftID").height(pageMainHig - 80);
        $("#mapLeftID").width(pageWidth * 0.23);
        $("#mapRightID").height(pageMainHig - 80);
        $("#mapRightID").width(pageWidth * 0.23);
        mapFun(this.mapParam);   // 初始化地圖
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>