Press Next

# PressMatchMessagesRecommend 推荐队伍

推荐队伍组件，用于展示推荐的游戏队伍信息，支持队伍申请功能。

# 引入

import PressMatchMessagesRecommend from 'press-ui/press-match-messages-recommend/press-match-messages-recommend.vue'

# 代码演示

# 基础用法

<PressMatchMessagesRecommend
  :content="content"
  @item-click="handleItemClick"
/>

import { ref } from 'vue'
import type { RecommendItem } from 'press-ui/press-match-messages-recommend/demo-data'

const content = ref({
  items: [
    {
      id: 1,
      title: '王者荣耀战队',
      level: '王者30星',
      kd: 'KD 2.8',
      area: '华南区',
      description: '专业电竞战队，擅长团战配合，寻找志同道合的队友一起冲分！',
      bg: 'https://example.com/team1.jpg',
      buttonColor: '#6A36EE',
    }
  ]
})

const handleItemClick = (item: RecommendItem, index: number) => {
  console.log('点击推荐项:', item, '索引:', index)
}

# API

# Props

参数 说明 类型 默认值
content 推荐内容数据 RecommendContent -
custom-class 自定义类名 string ''
custom-style 自定义样式 string ''

# Events

事件名 说明 回调参数
item-click 点击推荐项时触发 (item: RecommendItem, index: number)

# 数据结构

# RecommendItem

参数 说明 类型 必填
id 唯一标识 string \| number 是
title 队伍标题 string 是
level 等级信息 string 是
kd KD值 string 是
area 地区信息 string 是
description 描述信息 string 否
bg 背景图片 string 是
buttonColor 按钮颜色 string 是

# RecommendContent

参数 说明 类型 必填
items 推荐项列表 RecommendItem[] 是

# 主题定制

# CSS 变量

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

名称 默认值 描述
--pmm-recommend-info-bg rgba(211, 212, 252, .48) 描述背景颜色
--pmm-recommend-main-color #212124 主文字颜色
--pmm-recommend-sub-color rgba(33, 33, 36, .6) 次文字颜色
--pmm-recommend-main-weight 600 主文字粗细
--pmm-recommend-text-sm .2rem 正文小字号
--pmm-recommend-text-md .24rem 主要文字
--pmm-recommend-items-radius .08rem 卡片圆角
--pmm-recommend-right-width 1.6rem 卡片右侧区域宽度
--pmm-recommend-content-padding .24rem .16rem .36rem .24rem 卡片右侧区域内边距
--pmm-recommend-level-width 1.12rem 卡片级别宽度
--pmm-recommend-kd-width 1.12rem 卡片KD宽度
--pmm-recommend-area-width 1.12rem 卡片区域宽度
--pmm-recommend-header-height 1.74rem 卡片header高度

← MatchMessagesRounds →