Vue 组件中动态实现 Slot 换行：6个 Slot 为一行

<template>
  <div>
    <template v-for="(slot, index) in slots">
      <div
        v-if="index % 6 === 0"
        class="row"
      >
        <slot :name="slot"></slot>
      </div>
      <div
        v-else
        class="col"
      >
        <slot :name="slot"></slot>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    slots: {
      type: Array,
      default: () => [],
    },
  },
};
</script>
<style>
.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  width: 16.66667%; /* 100% / 6 */
}
</style>
<p>在组件中，你可以将需要展示的'slot'名字通过'props'传入，然后使用'v-for'来遍历'slots'数组，根据'index'和'6'的余数来判断是否需要换行，如果需要换行，就在一个'<div>'中展示一个'slot'，否则，在另一个'<div>'中展示一个'slot'。</p>
<p>最后，你可以通过'<style>'标签来设置行和列的样式，这里使用'flex-wrap'来实现换行，使用'width'来设置'col'的宽度。</p>