[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标签的宽高计算了，作业量比第一种多，两种选其一