Vue.js 组件动态展示多行 Slot，每行 6 个，超过换行

可以使用 Vue.js 的内置方法 $slots 来获取所有的 slot，然后根据 slot 的数量进行判断和展示。

具体实现步骤如下：

1. 在组件的模板中使用 v-for 指令遍历所有的 slot，使用 $slots 来获取所有的 slot
2. 在组件的 mounted 生命周期中获取 slot 的数量，然后进行判断和展示

mounted() {
  const slots = this.$slots.default
  const rowSize = 6 // 每行的 slot 数量
  const rowNum = Math.ceil(slots.length / rowSize) // 总共的行数
// 循环遍历每一行
for (let i = 0; i < rowNum; i++) {
const rowStart = i * rowSize // 当前行的起始位置
const rowEnd = Math.min(rowStart + rowSize, slots.length) // 当前行的结束位置
// 创建一个新的行
const rowEl = document.createElement('div')
rowEl.className = 'row'

// 将当前行的所有 slot 添加到行中
for (let j = rowStart; j &lt; rowEnd; j++) {
  const slotEl = slots[j].elm
  rowEl.appendChild(slotEl)
} 

// 将行添加到组件中
this.$el.appendChild(rowEl)

}
}

3. 在样式中设置每行的宽度和换行

.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.row > * {
width: calc(100% / 6);
}

这样就可以根据传入 slot 的数量进行展示，并且超过 6 个就换行了。