MatchGroupingItem 分组卡片

# MatchGroupingItem 分组卡片

分组卡片组件，用于展示分组信息，支持成员头像展示和操作按钮，适用于比赛分组、团队展示等场景。

# 引入

import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

# 代码演示

# 基础用法

展示基础的分组信息，包括分组名称、成员头像列表和操作按钮。

<template>
  <PressMatchGroupingItem
    group-name="第 1 组"
    :members="memberList"
    :show-action="true"
    action-text="开始比赛"
    @action-click="handleActionClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

interface Member {
  id: string | number;
  name: string;
  avatar?: string;
}

const memberList = ref<Member[]>([
  {
    id: 1,
    name: '张三',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
  {
    id: 2,
    name: '李四',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
  {
    id: 3,
    name: '王五',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
]);

const handleActionClick = () => {
  console.log('开始比赛');
};
</script>

# 无操作按钮

不显示操作按钮，仅展示分组信息。

<template>
  <PressMatchGroupingItem
    group-name="第 2 组"
    :members="memberList"
    :show-action="false"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

const memberList = ref([
  { id: 1, name: '张三', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, name: '李四', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);
</script>

# 自定义按钮文案

自定义操作按钮的文字内容。

<template>
  <PressMatchGroupingItem
    group-name="第 3 组"
    :members="memberList"
    :show-action="true"
    action-text="查看详情"
    @action-click="handleViewDetail"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

const memberList = ref([
  { id: 1, name: '张三', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, name: '李四', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);

const handleViewDetail = () => {
  console.log('查看详情');
};
</script>

# 自定义操作按钮

通过插槽自定义操作按钮区域，可以添加多个按钮或其他内容。

<template>
  <PressMatchGroupingItem
    group-name="第 4 组"
    :members="memberList"
  >
    <template #ctrls-btn>
      <PressButton
        type="default"
        size="small"
        style="margin-right: 8px;"
        @click="handleEdit"
      >
        编辑
      </PressButton>
      <PressButton
        type="primary"
        size="small"
        @click="handleStart"
      >
        开始比赛
      </PressButton>
    </template>
  </PressMatchGroupingItem>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';
import { PressButton } from 'press-ui';

const memberList = ref([
  { id: 1, name: '张三', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, name: '李四', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);

const handleEdit = () => {
  console.log('编辑分组');
};

const handleStart = () => {
  console.log('开始比赛');
};
</script>

# 自定义样式

通过 CSS 变量自定义组件样式。

<template>
  <PressMatchGroupingItem
    group-name="自定义样式组"
    :members="memberList"
    :show-action="true"
    action-text="开始比赛"
    customl-class="my-grouping-item"
    @action-click="handleActionClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchGroupingItem from 'press-next/press-match-grouping-item/press-match-grouping-item.vue';

const memberList = ref([
  { id: 1, name: '张三', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 2, name: '李四', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);

const handleActionClick = () => {
  console.log('开始比赛');
};
</script>

<style>
.my-grouping-item {
  --pmgi-header-bg: #f0f9ff;
  --pmgi-header-title-color: #0369a1;
  --pmgi-avatar-size: 1.2rem;
  --pmgi-card-border-radius: .16rem;
}
</style>

# API

# Props

参数	说明	类型	默认值
customl-class	自定义类名	string	-
group-name	分组名称	string	-
members	成员列表	Member[]	`[]`
show-action	是否显示操作按钮	boolean	`false`
action-text	操作按钮文字	string	`'开始比赛'`

# Member 数据结构

属性	说明	类型	必填
id	成员ID	string \| number	是
name	成员姓名	string	是
avatar	成员头像URL	string	否

# Events

事件名	说明	回调参数
action-click	点击操作按钮时触发	-

# Slots

名称	说明
ctrls-btn	自定义操作按钮区域

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

# 间距系统

名称	默认值	描述
--pmgi-list-gap	$spacing-md	头像列表间距
--pmgi-header-padding-lr	$spacing-lg	头部左右内边距
--pmgi-header-right-mr	$spacing-lg	头部右侧外边距
--pmgi-body-padding-tb	$spacing-xl	主体上下内边距
--pmgi-body-padding-lr	$spacing-lg	主体左右内边距
--pmgi-ctrls-mt	$spacing-lg	控制按钮上边距

# 尺寸系统

名称	默认值	描述
--pmgi-card-min-height	1.44rem	卡片最小高度
--pmgi-avatar-size	1rem	头像尺寸
--pmgi-header-title-max-width	3rem	头部标题最大宽度
--pmgi-header-height	.72rem	头部高度
--pmgi-ctrls-btn-width	3.2rem	控制按钮宽度

# 颜色系统

名称	默认值	描述
--pmgi-bg-color	$color-surface-default	背景色
--pmgi-card-border-color	none	边框颜色
--pmgi-header-info-text-color	$color-text-secondary	信息文字颜色
--pmgi-header-bg	$color-divider-light	头部背景色
--pmgi-header-left-bg	$color-surface-brand-light2	头部左侧背景色
--pmgi-header-title-color	$color-text-primary	头部标题颜色
--pmgi-header-icon-color	$color-text-primary	头部图标颜色
--pmgi-avatar-border-color	$color-divider-light	成员头像边框颜色
--pmgi-avatar-bg-color	$color-surface-default	成员头像背景色

# 字体系统

名称	默认值	描述
--pmgi-header-title-font-size	$font-size-md	头部标题字体大小
--pmgi-header-title-font-weight	$font-weight-bold	头部标题字体粗细
--pmgi-header-icon-font-size	$font-size-xl	头部图标字体大小
--pmgi-header-info-font-size	$font-size-sm	信息字体大小

# 圆角系统

名称	默认值	描述
--pmgi-card-border-radius	.12rem	卡片圆角
--pmgi-avatar-border-radius	50%	头像圆角

# 阴影系统

名称	默认值	描述
--pmgi-card-shadow	none	卡片阴影

# 其他

名称	默认值	描述
--pmgi-header-clip-path	polygon(0 0, calc(100% - 12px) 0, 100% 100%, 100% 100%, 0 100%)	卡片切角

# 常见问题

# 如何自定义操作按钮？

使用 ctrls-btn 插槽可以完全自定义操作按钮区域：

<template>
  <PressMatchGroupingItem :members="members">
    <template #ctrls-btn>
      <PressButton @click="handleCustomAction">
        自定义按钮
      </PressButton>
    </template>
  </PressMatchGroupingItem>
</template>

# 成员头像列表如何横向滚动？

组件已内置横向滚动功能，当成员数量较多时会自动启用横向滚动，并隐藏滚动条以保持美观。

# 如何修改头部的切角样式？

通过 CSS 变量 --pmgi-header-clip-path 可以自定义头部左侧的切角形状：

.custom-grouping {
  --pmgi-header-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 移除切角 */
}

# 如何显示成员总数？

组件头部右侧会自动显示"共有X支队伍"，数量根据 members 数组长度自动计算。

← MatchGroupQRcodeScanPopup MatchJoinTeamPopup →