Vue 组件动态展示 Slot,实现每行6个,超出换行
可以通过计算属性的方式来实现。
首先,在组件中定义一个计算属性,用于计算传入的 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 即可:
1
2
3
4
5
6
7
8
9
10
11
12
在这里,我们传入了 12 个 slot,根据我们的计算属性,会渲染两行,每行展示 6 个 slot。
原文地址: https://www.cveoy.top/t/topic/lKm8 著作权归作者所有。请勿转载和采集!