vue监听窗口变小重载页面,渲染div,变大不处理

2021-04-06  本文已影响0人  十一点后不在线

页面用flex流式布局的,左侧div嵌套了el-table表格,缩小浏览器窗口时整体不会跟随变化(导致部分内容在浏览器外,刷新页面,重新渲染即正常显示,不知为何),放大浏览器窗口,div整体却可以随动

解决思路:
只能监听页面宽度,变小重载,变大无需处理

// 定义监听宽度
screenWidth:0,

mounted() {
    this.watchWidth()
},

watch: {
    // 监听浏览器窗口宽度,当浏览器窗口变小重载页面
    screenWidth(nval, oval) {
      if (nval < oval) {
        console.log('窗口小了')
        location.reload()
      } else {
        console.log('窗口大了')
      }
    }
  },

methods: {
 // 获取浏览器宽度
    watchWidth() {
      window.onresize = () => {
        return (() => {
          window.screenWidth = window.innerWidth
          this.screenWidth = window.screenWidth
        })()
      }
    },
}
上一篇 下一篇

猜你喜欢

热点阅读