vue九宫格播放

2023年9月12日22:09:19

vue实现九宫格自适应播放

业务要实现九宫格的播放，同时也要做到拖拽放大的自适应，两种思路方法，一种是通过九宫格播放容器的宽高进行单元格尺寸的计算再搭配flex等css实现自适应，工作量较大；第二种是通过ui组件库自带的grid布局，这里用ant-design-vue实现自适应大小和自适应宫格的播放。效果图如下：

如何实现自适应数量宫格

---

想要播放布局从1-1、1-2、2-2、2-3、3-3的规律进行变化，先看看宫格数与行列间的关系，看如下计算：

宫格数	1	2	3	4	5	6	7	8	9
Math.sqrt()	1	1.4	1.7	2	2.2	2.4	2.6	2.8	3

开方数	1	1.4	1.7	2	2.2	2.4	2.6	2.8	3
行--Math.round	1	1	2	2	2	2	3	3	3
列--Math.ceil	1	2	2	2	3	3	3	3	3

用行列进行grid渲染

---

贴核心代码块：

<template>
  <div ref="contentLayout">
    <template v-for="r in rows" :key="r">
      <a-row>
        <template v-for="video in groups[r-1]" :key="video.Id">
          <a-col :span="24 * (1 / cols)">
            <video :height="size.height / rows"></video>
          </a-col>
        </template>
      </a-row>
    </template>
  </div>
</template>

<script>
  import { useResizeObserver } from '@vueuse/core'

  const contentLayout = ref<HTMLDivElement | null>(null)
  const rows = ref(1)
  const cols = ref(1)
  const groups = ref()
  const size = ref()
  ...

  // 转置一维视频数组videos为二维，并设置几行几列
  function truck() {
    rows.value = Math.round(Math.sqrt(videos.length))
    cols.value = Math.ceil(Math.sqrt(videos.length))
    groups.value = []
    let startIdx: number = 0, tempArr: any[] = []
    while(startIdx < videos.length) {
      tempArr = videos.slice(startIdx, startIdx += cols.value)
      groups.value.push(tempArr)
    }
  }

  // 监听div的拖拽大小
  /*
    实现这一步是为了给video标签赋值高度，因为grid布局有个缺点就是高度可能会被单元格子元素内容撑大，尝试只通过css百分比解决未果，还是得通过js换算具体数值
  */
  useResizeObserver(contentLayout, entries => {
    const entry = entries[0]
    const { width, height } = entry.contentRect
    size.value = { width, height }
  })
</script>

用flex布局进行渲染

---

这个略过了，大体上把握好rows & cols之间的变化规律，监听div九宫格视频容器大小变化获得width & height（容器有大小变化需求）同时配合flex弹性盒进行布局，flex布局要设置换行warp，剩下的就是写函数进行video标签的宽高计算了，作业量比第一种多，两种选其一