CardList 卡片列表

基于 CSS Grid 的卡片列表容器，支持前端分页，卡片内容完全由插槽自定义。

基本用法

使用 `data` 传入数据，通过默认插槽自定义每张卡片的内容。

项

项目 1

这是第 1 个项目的简要描述信息，用于展示卡片列表的基本用法。

停用

项

项目 2

这是第 2 个项目的简要描述信息，用于展示卡片列表的基本用法。

启用

项

项目 3

这是第 3 个项目的简要描述信息，用于展示卡片列表的基本用法。

启用

项

项目 4

这是第 4 个项目的简要描述信息，用于展示卡片列表的基本用法。

停用

项

项目 5

这是第 5 个项目的简要描述信息，用于展示卡片列表的基本用法。

启用

项

项目 6

这是第 6 个项目的简要描述信息，用于展示卡片列表的基本用法。

启用

<template>
  <div style="width: 100%">
    <hx-card-list :data="cardList" :columns="3" :column-gap="16" :row-gap="16" >
      <template #default="{ item, index }">
        <el-card shadow="hover" :body-style="{ padding: '16px' }">
          <div class="card-content">
            <el-avatar :size="48" :style="{ backgroundColor: item.color }">
              {{ item.name.charAt(0) }}
            </el-avatar>
            <h3 class="card-name">{{ item.name }}</h3>
            <p class="card-desc">{{ item.description }}</p>
            <el-tag :type="item.status === 'active' ? 'success' : 'info'" size="small">
              {{ item.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </div>
        </el-card>
      </template>
    </hx-card-list>
  </div>
</template>

<script lang="ts" setup>
import { HxCardList } from '@whhx/ui'

const cardList = Array.from({ length: 6 }, (_, i) => ({
  name: `项目 ${i + 1}`,
  description: `这是第 ${i + 1} 个项目的简要描述信息，用于展示卡片列表的基本用法。`,
  status: i % 3 === 0 ? 'inactive' : 'active',
  color: ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#b37feb'][i],
}))
</script>

<style scoped>
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--el-text-color-placeholder);
  line-height: 1.5;
}
</style>

前端分页

启用 `frontPagination` 后，按 `currentPage/pageSize` 对 data 自动切片。

项

项目 1

这是第 1 个项目的简要描述信息，用于展示卡片列表的分页效果。

停用

项

项目 2

这是第 2 个项目的简要描述信息，用于展示卡片列表的分页效果。

启用

项

项目 3

这是第 3 个项目的简要描述信息，用于展示卡片列表的分页效果。

启用

项

项目 4

这是第 4 个项目的简要描述信息，用于展示卡片列表的分页效果。

停用

项

项目 5

这是第 5 个项目的简要描述信息，用于展示卡片列表的分页效果。

启用

项

项目 6

这是第 6 个项目的简要描述信息，用于展示卡片列表的分页效果。

启用

共 32 条

• 1
• 2
• 3
• 4
• 5
• 6

前往

页

<template>
  <div style="width: 100%">
    <hx-card-list
      :data="cardList"
      :columns="3"
      :column-gap="16"
      :row-gap="16"
      show-pagination
      front-pagination
      :page-size="6"
       height="320px"
      v-model:current-page="currentPage"
    >
      <template #default="{ item, index }">
        <el-card shadow="hover" :body-style="{ padding: '16px' }">
          <div class="card-content">
            <el-avatar :size="48" :style="{ backgroundColor: item.color }">
              {{ item.name.charAt(0) }}
            </el-avatar>
            <h3 class="card-name">{{ item.name }}</h3>
            <p class="card-desc">{{ item.description }}</p>
            <el-tag :type="item.status === 'active' ? 'success' : 'info'" size="small">
              {{ item.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </div>
        </el-card>
      </template>
    </hx-card-list>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { HxCardList } from '@whhx/ui'

const currentPage = ref(1)

const colors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#b37feb', '#36cfc9', '#ff85c0']
const cardList = Array.from({ length: 32 }, (_, i) => ({
  name: `项目 ${i + 1}`,
  description: `这是第 ${i + 1} 个项目的简要描述信息，用于展示卡片列表的分页效果。`,
  status: i % 3 === 0 ? 'inactive' : 'active',
  color: colors[i % colors.length],
}))
</script>

<style scoped>
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.card-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--el-text-color-placeholder);
  line-height: 1.5;
}
</style>

API

Props

名称	说明	类型	默认值
data	数据源	any[]	[]
columns	每行卡片列数	number	3
row-gap	行间距(px)	number	16
column-gap	列间距(px)	number	16
show-pagination	是否显示分页	boolean	false
front-pagination	是否启用前端分页切片	boolean	false
current-page	当前页码，支持 v-model	number	1
page-size	每页数量，支持 v-model	number	8
page-sizes	可选每页条数	number[]	[8,16,24,48]
total	总条数（后端分页时使用）	number	0
pagination-layout	分页布局	string	'total, sizes, prev, pager, next, jumper'
height	容器高度，设置后卡片区域将出现滚动条	string	—
max-height	容器最大高度，超出后卡片区域出现滚动条	string	—

Events

事件名	说明	回调参数
size-change	每页数量变化	(size: number) => void
current-change	当前页变化	(page: number) => void
update:current-page	v-model 当前页更新	(page: number) => void
update:page-size	v-model 每页数量更新	(size: number) => void

Slots

插槽名	作用域	说明
default	{ item, index }	卡片内容
empty	—	无数据时显示，默认展示 el-empty
header	—	列表顶部区域