vue中一个组件使用多个相同子组件自适应窗口变化问题

vue中一个组件使用多个相同子组件自适应窗口变化问题

问题背景

1. 一个组件中用了两次自定义的table组件
2. table组件中使用window.onresize监听了浏览器窗口的变化，并做了自适应处理

产生的问题

由于window是个全局变量，所以渲染第二个table组件时，会覆盖第一个table组件的监听事件，所以只有第二个table会自适应缩放

解决

在父组件中获取两个table子组件的dom,然activated周期函数中手动调用子组件的自适应函数 changeTableHeight，由于我使用了keep-alive，所以重新进入之前进过的页面时，不会重新调用钩子函数，activated例外，所以将window.onresize放在activated中，每次进入页面时都会刷新这个监听事件

    activated() {
      //监听窗口的变化放在 actived中，每次进入页面时都会重新刷新监听函数
      //解决了在多个组件中同时使用window.onresize时，监听失效问题
      //失效原因是进入当前页面时，不执行其它钩子函数（mounted,created等），未刷新window.onresize事件
      this.$nextTick(() => {
        window.onresize = () => {
          return (() => {
            console.log("active")
            this.$refs.left.changeTableHeight()
            this.$refs.right.changeTableHeight()
          })()
        }
      })

    },

子组件中的自适应处理

如果父组件只使用一次有window.onresize的子组件，在父组件中就不需要重新监听窗口大小的变化

1. 子组件activated钩子函数

    activated() {
      //进入页面时，计算表格的高度
      //由于在created钩子函数中，页面元素还未渲染
      //使用 $nextTick ,使元素渲染成功后执行函数
      this.$nextTick(() => {
        this.changeTableHeight()
        //窗口发生变化时触发，重新计算页面中表格的高度
        window.onresize = () => {
          return (() => {
            this.changeTableHeight()
          })()
        }
      })
    },

2. 自适应处理函数

methods: {
      //随着浏览器窗口的高度，改变表格的高度
      changeTableHeight() {
        if (this.isAutoHeight) {
          let height = window.innerHeight
          // 窗口的高度 - 表格顶端距离界面顶端的高度 - 表格底部想要距离界面底部的高度（这个高度可以自己调试）
          this.tableHeight = height - this.$refs.hTable.$el.getBoundingClientRect().top - this.$refs.hPage.$el.clientHeight - 45
        }
      },