Vue项目中实现改变屏幕尺寸重新刷新页面-计算页面尺寸

Posted 2022-05-03 JackieDYH

 效果

---

在app.vue中设置 

方式一

<template>
  <div id="app">
      <router-view />
  </div>
</template>
<script>
export default 
  name: "App",
  components: ,
  data() 
    return ;
  ,
  created() ,
  mounted() 
    //窗口尺寸改变
    window.onresize = () => 
      return (() => 
        // this.$forceUpdate();//强制更新数据
        this.$router.go(0);
      )();
    ;
  ,
  methods: ,
  destroyed() 
    // 销毁
    window.onresize = null;
  ,
;
</script>

多次使用window.onresize，会造成其他的失效

方式二

<template>
  <div id="app">
      <router-view />
  </div>
</template>
<script>
export default 
  name: "App",
  components: ,
  data() 
    return ;
  ,
  created() ,
  mounted() 
    //窗口尺寸改变
    window.addEventListener("resize", () => this.Refresh());
  ,
  methods: 
	Refresh() 
      this.$router.go(0);
    ,
  ,
  destroyed() 
    // 销毁
    window.removeEventListener("resize", this.Refresh());
  ,
;
</script>