space 动态布局组件(vue3-ts、setup)

动态布局组件

演示效果

使用方法

<Space :list="data" :ws="20" :hs="20" :x="3">
  <template #item="{ item, index }">
    <div clss="color-bg-3">
      <span class="color-font-0">{{ item.a }}</span><br/>
      <span class="color-font-0">{{ item.b }}</span><br/>
    </div>
  </template>
</Space>

import Space from '@/components/space/index.vue';

开发源码

<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>