折叠屏切屏导致样式异常解决办法

最新推荐文章于 2024-07-25 13:40:37 发布

�PEACH?

最新推荐文章于 2024-07-25 13:40:37 发布

阅读量423

点赞数 7

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/weixin_46381556/article/details/134964128

版权

仅作为参数，不一定适用所有项目！

（1）使用v-if刷新出问题的UI

<div class="title" v-if="show">
    <span>还款计划</span>
</div>



data{
    return{
        show:true,
        innerWidth:'',
    }
}

(1)监听屏幕尺寸变化：如果页面有键盘弹出，onresize也会监测到屏幕尺寸的改变，所以这里只监听屏幕宽度的变化
mounted() {
    this.innerWidth = window.innerWidth;
    window.onresize = () =>{
      console.log('屏幕尺寸发生变化')
      const newInnerWidth = window.innerWidth;
      if (this.innerWidth !== newInnerWidth) {
        this.$refs.screen.toggle(false); 
        this.show = false;
        this.$nextTick(function(){
          this.show = true;
        })
        this.innerWidth = newInnerWidth;
      }
    }
  },

(2)遇到echarts时，需要先清空再重新初始化
mounted() {
1）
    window.onresize = () =>{
        console.log('屏幕尺寸发生变化')
        this.echartsFinacial.resize();
        this.echartsbalanceAvg.resize();
    }
2）我有遇到window.onresize失效问题，使用以下方法即可解决
    window.addEventListener('resize',() => {
        console.log('屏幕尺寸发生变化')
        this.echartsDeposit.resize();
    })
}