vue利用计算属性动态控制div大小

因为需要动态控制div的显示数目，所以需要div的大小能动态变化，这里使用的计算属性来实现

这里的videoWidth和videoHeight就是计算属性

computed: {
  videoWidth: {
    get: function () {
      // elmWidth是当前控件的宽度
      return this.elmWidth / this.columnNum - 10
    }
  },

  videoHeight: {
    get: function () {
      // elmHeight是当前控件的高度
      return this.elmHeight / this.rowNum - 10
    }
  },

  // rowNum和comunmNum根据当前需要展示的视频数目videoNumShow计算
  // videoNumShow是父组件传递的一个属性
  // 4 -- 2 * 2
  // 9 -- 3 * 3
  // 12 -- 3 * 4
  // 24 -- 4 * 6
  rowNum: {
    get: function () {
      if (this.videoNumShow === 4) return 2
      else if (this.videoNumShow === 9) return 3
      else if (this.videoNumShow === 12) return 3
      else if (this.videoNumShow === 24) return 4
      return 2
    }
  },

  columnNum: {
    get: function () {
      if (this.videoNumShow === 4) return 2
      else if (this.videoNumShow === 9) return 3
      else if (this.videoNumShow === 12) return 4
      else if (this.videoNumShow === 24) return 6
      return 2
    }
  }
}

这样在父组件传递进来的videoNumShow改变时，就会自动改变窗口的大小

另外需要说明的几点

1、elmWidth和elmHeight可以通过ResizeObserver监听动态的获取

mounted () {
  const that = this
  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      console.log(entry)
      that.elmWidth = that.$el.getClientRects()[0].width
      that.elmHeight = that.$el.getClientRects()[0].height
    }
  })

  this.resizeObserver = resizeObserver
  if (this.$el instanceof Element) {
    resizeObserver.observe(this.$el)
  }
  else {
    // 定时检测是否this.$el有效
    setInterval(function () {
      if (that.$el instanceof Element) {
        that.resizeObserver.observe(that.$el)
      }
    }, 1000)
  }

  that.elmWidth = that.$el.getClientRects()[0].width
  that.elmHeight = that.$el.getClientRects()[0].height
}

2、视频的显示数目可以通过绑定class实现

      像下面这个div，在videoNumShow小于5的时候就会隐藏，hide是一个用来隐藏的样式 display: none;