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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值