space 动态布局算法(vue3-ts、setup)

动态布局组件

演示效果

<template>
  <ul
    class="space_ul flex-row"
    :style="{
      'padding-top': `${hs}px`,
      'padding-left': `${ws}px`
    }"
  >
    <li
      v-for="(item, index) in list"
      class="space_li"
      :style="{
        'flex': `0 0 ${100 / x}%`,
        'width': `calc(100% - ${ws*(x+1) / x}px)`,
        'padding-right': `${ws}px`,
        'padding-bottom': `${hs}px`,
      }"
    >
      <slot name="item" v-bind="{item, index}"></slot>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";

// 使用
const props = defineProps<{
  list: Array<any>; // 渲染数据
  ws: number; // 宽度间距
  hs: number; // 高度间距
  x: number;  // 每行个数
}>();
</script>

<style lang="scss" scoped>
.space_ul {
  display: flex;
  flex-wrap: wrap;
}
.space_li {}
</style>![](/i/l/?n=22&i=blog/2066765/202211/2066765-20221111183335065-2052723196.jpg)