MatchSiteItem 赛点列表

引入

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

export default {
  components: {
    PressMatchSiteItem,
  }
}

代码演示

基础用法

<PressMatchSiteItem
  v-for="(item, index) of siteList"
  :key="index"
  :site-item="item"
  @clickAddress="clickAddress"
  @click="click"
/>

function getMockData(length) {
  const siteItem = {
    labelName: '待开赛',
    prizePic: 'https://image-1251917893.file.myqcloud.com/HPJY_Gamesystem_2020/DZS_2C/show-prizes-demo.png?imageMogr2/thumbnail/!80x80r',
    childStageName: '淘汰赛',

    childName: '比赛名称',
    startMatchDateDesc: '3/2开赛',
    uTypeText: '微信',
    joinFuncDesc: '团体赛',
    joinNum: '666',
    childAddress: '线上',
    buttonText: '查看赛程',
  };

  const labelClassList = [
    'isLabelGray',
    'isLabelGreen',
    'isLabelOrange',
    'isLabelBlue',
  ];

  const uTypeTextList = [
    '微信',
    'QQ',
  ];
  const buttonClassList = [
    'isButtonPrimary',
    'isButtonDefault',
  ];

  return Array.from({ length }).map((_, index) => ({
    ...siteItem,
    [labelClassList[index % labelClassList.length]]: true,
    uTypeText: uTypeTextList[index % uTypeTextList.length],
    [buttonClassList[index % buttonClassList.length]]: true,
  }));
}


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

API

Props

参数	说明	类型	默认值
site-item	赛事信息	object	-

Events

事件名	说明	参数
click	点击卡片	-
clickAddress	点击地点	-

SiteItem

siteItem 类型如下：

type ISiteItem = {
  labelName: string;
  isLabelGray?: boolean;
  isLabelGreen?: boolean;
  isLabelOrange?: boolean;
  isLabelBlue?: boolean;

  prizePic: string;
  childStageName: string;
  
  childName: string;
  
  startMatchDateDesc: string; // 开赛时间描述
  uTypeText: string; // 微信或者QQ
  joinFuncDesc: string; // 团队赛或者个人赛
  joinNum?: string;
  
  childAddress: string;
  
  buttonText: string;
  isButtonPrimary?: boolean;
  isButtonDefault?: boolean;
}