MatchItem 赛事列表

# MatchItem 赛事列表

# 引入

import PressMatchItem from '@tencent/press-plus/press-match-item/press-match-item';

export default {
  components: {
    PressMatchItem,
  }
}

# 代码演示

# 基础用法

<PressMatchItem
  v-for="(item, index) of matchList"
  :key="index"
  :match-item="item"
  @click="click"
/>

const labelClassList = [
  'isTagGray',
  'isTagGreen',
  'isTagOrange',
  'isTagBlue',
];

function getMockData(length) {
  return Array.from({ length }).map((_, index) => ({
    showLiving: index > 5,
    tagText: '报名中',
    [labelClassList[index % labelClassList.length]]: true,


    gameName: '比赛名称',

    showShare: false,

    matchStartDesc: '3/2开赛',
    gameTag: '商户赛',
    isOnline: index % 3,
    isOffline: index % 3 === 1,

    prizeDesc: '丰厚奖励',
    gameTypePic: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/article/2024/1/own_mike_b4dd7d92644d642238.png',
    prizeImage: '	https://image-1251917893.file.myqcloud.com/igame/match/gp/horz-match/prize.png',
    modifyButtonText: '修改比赛'

  }));
}

export default {
  data() {
    return {
      matchList: getMockData(10),
    }
  }
}

# API

# Props

参数	说明	类型	默认值
match-item	赛事信息	object	-
show-owner-info	是否显示主理人信息	boolean	`false`
owner-info	主理人信息	object	-

# Events

事件名	说明	参数
click	点击卡片	-
clickModifyGame	点击修改比赛	-
clickScheduleManage	点击赛程管理	-
clickShare	点击分享	-
clickOwnerButton	点击主理人信息按钮	-

# MatchItem

matchItem 类型说明如下：

type IMatchItem = {
  showLiving: boolean;
  tagText: string;
  isTagGray?: boolean;
  isTagGreen?: boolean;
  isTagOrange?: boolean;
  isTagBlue?: boolean;

  gameName: string;
  showShare: boolean;
  
  matchStartDesc?: string;
  gameTag?: string;
  isOnline?: number;
  isOffline?: boolean;
  
  prizeDesc: string;

  gameTypePic: string;
  prizeImage: string;
  modifyButtonText: string;
  scheduleManageTip: string;
  clickModifyGame: () => void;
  clickScheduleManage: () => void;
}

# ownerInfo

ownerInfo 示例如下：

ownerInfo: {
  nick: '其他贡献者-nick',
  title: '赛事主理人',
  avatar: AVATAR_PIC,
  gradePic: PRIZE_PIC,
  grade: '青铜',
  isPrimaryButton: true,
  button: '立即报名',
  isSecondaryButton: false,
},

横屏

← HoldMatchList MatchItemHome →