可以通过计算属性的方式来实现。

首先,在组件中定义一个计算属性,用于计算传入的 slot 数量:

computed: {
  rows () {
    return Math.ceil(this.$slots.default.length / 6)
  }
}

然后,在模板中使用 v-for 循环来渲染每一行的 slot:


在这里,我们使用了 v-for 循环来渲染每一行,根据计算属性计算出来的行数来确定循环次数。在每一行中,我们使用 slot 的 name 属性来确定要渲染的具体 slot,通过计算 i*6-5 到 i*6 的值来确定每个 slot 的名称。

最后,在使用组件时,只需要在组件中传入需要展示的 slot 即可:


在这里,我们传入了 12 个 slot,根据我们的计算属性,会渲染两行,每行展示 6 个 slot。


原文地址: https://www.cveoy.top/t/topic/lKm8 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录