MatchTeamItem 队伍项目

队伍项目组件，用于展示队伍信息，包括队伍名称、成员列表、队长标识等。支持自动控制添加按钮显示、队长标识、成员点击等功能。

引入

import PressMatchTeamItem from 'press-next/press-match-team-item/press-match-team-item.vue';

代码演示

基础用法

展示基本的队伍信息，包括队伍名称和成员列表。

<template>
  <PressMatchTeamItem
    team-name="战队名称"
    :members="members"
    :max-members="5"
    add-button-text="申请加入"
    @member-click="handleMemberClick"
    @add-click="handleAddClick"
  />
</template>

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

interface TeamMember {
  id: string | number;
  name: string;
  avatar: string;
  isCaptain?: boolean;
  icon?: string;
}

const members = ref<TeamMember[]>([
  {
    id: 1,
    name: '队长',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    isCaptain: true,
  },
  {
    id: 2,
    name: '队员1',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
  {
    id: 3,
    name: '队员2',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
  },
]);

const handleMemberClick = (member: TeamMember, index: number) => {
  console.log('点击成员:', member, '索引:', index);
};

const handleAddClick = () => {
  console.log('点击加入按钮');
};
</script>

满员队伍

当成员数量达到或超过 6 人时，自动隐藏添加按钮。

<template>
  <PressMatchTeamItem
    team-name="满员战队"
    :members="fullMembers"
    :max-members="6"
  />
</template>

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

const fullMembers = ref([
  { id: 1, name: '队长', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', isCaptain: true },
  { id: 2, name: '队员1', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 3, name: '队员2', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 4, name: '队员3', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 5, name: '队员4', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
  { id: 6, name: '队员5', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);
</script>

空队伍

展示空队伍状态，显示添加按钮引导用户加入。

<template>
  <PressMatchTeamItem
    team-name="新建战队"
    :members="[]"
    :max-members="5"
    add-button-text="立即加入"
    @add-click="handleJoin"
  />
</template>

<script setup lang="ts">
import PressMatchTeamItem from 'press-next/press-match-team-item/press-match-team-item.vue';

const handleJoin = () => {
  console.log('立即加入队伍');
};
</script>

操作态队伍

支持复选框选择功能的队伍卡片。

<template>
  <PressMatchTeamItem
    team-name="可选择战队"
    team-type="action"
    :members="members"
    :checked="isChecked"
    :icon-size="16"
    @checkbox-change="handleCheckboxChange"
  />
</template>

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

const isChecked = ref(false);
const members = ref([
  { id: 1, name: '队长', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', isCaptain: true },
  { id: 2, name: '队员1', avatar: 'https://img.yzcdn.cn/vant/cat.jpeg' },
]);

const handleCheckboxChange = (checked: boolean) => {
  isChecked.value = checked;
  console.log('复选框状态:', checked);
};
</script>

API

Props

参数	说明	类型	默认值
team-name	队伍名称	string	阵营名称有八个字
team-type	队伍类型，action 时显示复选框	string	-
members	成员列表	TeamMember[]	[]
max-members	最大成员数，小于 6 时自动显示添加按钮	number	6
add-button-text	添加按钮文案	string	等你加入
checked	复选框选中状态（仅 team-type="action" 时有效）	boolean	false
icon-size	复选框图标大小（仅 team-type="action" 时有效）	number	14
custom-class	自定义类名	string	-

TeamMember 数据结构

键名	说明	类型	必填
id	成员ID	string | number	否
name	成员姓名	string	是
avatar	成员头像URL	string	是
isCaptain	是否为队长	boolean	否
icon	成员名称旁的图标URL	string	否

Events

事件名	说明	回调参数
member-click	点击成员时触发	member: TeamMember, index: number
add-click	点击添加按钮时触发	-
checkbox-change	复选框状态改变时触发	checked: boolean

主题定制

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

样式变量

间距系统

名称	默认值	描述
--pmti-header-padding-lr	$spacing-lg	头部左右内边距
--pmti-header-right-mr	$spacing-md	头部右侧外边距
--pmti-content-padding	$spacing-xl $spacing-lg	内容区域内边距
--pmti-member-gap	$spacing-md	成员间距
--pmti-add-btn-text-mt	.16rem	添加按钮文字上边距
--pmti-member-avatar-mt	$spacing-xs	成员头像上边距

尺寸系统

名称	默认值	描述
--pmti-container-height	auto	容器高度
--pmti-header-height	.72rem	头部高度
--pmti-header-title-max-width	3rem	头部标题最大宽度
--pmti-member-avatar-size	.8rem	成员头像尺寸
--pmti-member-name-icon-size	.28rem	成员名称图标尺寸
--pmti-captain-badge-size	.24rem	队长标识尺寸
--pmti-add-btn-size	.8rem	添加按钮尺寸

颜色系统

名称	默认值	描述
--pmti-container-bg	#fff	容器背景色
--pmti-header-bg	$color-divider-light	头部背景色
--pmti-header-left-bg	$color-surface-brand-light2	头部左侧背景色
--pmti-header-title-color	$color-text-primary	头部标题颜色
--pmti-header-icon-color	$color-text-primary	头部图标颜色
--pmti-member-avatar-border-color	$color-border-primary	成员头像边框颜色
--pmti-member-name-color	$color-text-invert-dark	成员名称颜色
--pmti-captain-badge-bg	$color-surface-brand	队长标识背景色
--pmti-captain-badge-color	$color-text-invert-light	队长标识文字颜色
--pmti-add-btn-bg	$color-divider-light	添加按钮背景色
--pmti-add-btn-border-color	$color-divider-default	添加按钮边框色
--pmti-add-btn-icon-color	$color-border-secondary	添加按钮图标颜色
--pmti-add-btn-text-color	$color-text-invert-default	添加按钮文字颜色

字体系统

名称	默认值	描述
--pmti-header-title-font-size	$font-size-md	头部标题字体大小
--pmti-header-title-font-weight	$font-weight-bold	头部标题字体粗细
--pmti-header-icon-font-size	$font-size-xl	头部图标字体大小
--pmti-member-name-font-size	$font-size-xs	成员名称字体大小
--pmti-captain-badge-icon-font-size	$font-size-xs	队长标识图标字体大小
--pmti-add-btn-icon-font-size	.4rem	添加按钮图标字体大小
--pmti-add-btn-text-font-size	$font-size-xs	添加按钮文字字体大小

圆角系统

名称	默认值	描述
--pmti-container-border-radius	$border-radius-sm	容器圆角
--pmti-member-avatar-border-radius	$border-radius-circle	成员头像圆角
--pmti-captain-badge-border-radius	$border-radius-circle	队长标识圆角
--pmti-add-btn-border-radius	$border-radius-circle	添加按钮圆角

常见问题

如何控制添加按钮的显示？

添加按钮的显示由 max-members 属性自动控制：

• 当 max-members < 6 时，自动显示添加按钮
• 当 max-members >= 6 时，自动隐藏添加按钮
• 显示添加按钮时，会为按钮预留一个位置，实际显示的成员数为 max-members - 1

如何标识队长？

在成员数据中设置 isCaptain: true 即可显示队长标识：

const members = [
  {
    id: 1,
    name: '队长',
    avatar: 'https://example.com/avatar.jpg',
    isCaptain: true, // 显示队长标识
  },
];

如何自定义成员名称旁的图标？

在成员数据中添加 icon 字段：

const members = [
  {
    id: 1,
    name: '特殊成员',
    avatar: 'https://example.com/avatar.jpg',
    icon: 'https://example.com/icon.png', // 成员名称旁显示的图标
  },
];

如何实现队伍选择功能？

设置 team-type="action" 并监听 checkbox-change 事件：

<template>
  <PressMatchTeamItem
    team-type="action"
    :checked="isChecked"
    @checkbox-change="handleChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isChecked = ref(false);

const handleChange = (checked: boolean) => {
  isChecked.value = checked;
};
</script>