ScheduleItem 赛程项

# ScheduleItem 赛程项

# 引入

import PressScheduleItem from '@tencent/press-next/press-schedule-item/press-schedule-item';

export default {
  components: {
    PressScheduleItem,
  }
}

# 代码演示

# 基础用法

<PressScheduleItem
  v-for="(item, index ) of demoList"
  :key="index"
  :team-a="item.teamA"
  :team-b="item.teamB"
  :progress="item.progress"
  :table-num="item.tableNum"
  :is-status-light="item.isStatusLight"
  :status-text="item.statusText"
  :primary-button="item.primaryButton"
  :secondary-button="item.secondaryButton"
  :border-button="item.borderButton"
  :tips="item.tips"
  @clickPrimaryButton="clickPrimaryButton"
  @clickSecondaryButton="clickSecondaryButton"
  @clickBorderButton="clickBorderButton"
/>

const DEMO_DATA = ref({
  teamA: {
    position: '东西',
    score: '过A',
    member: [
      {
        avatar: MOCK_USER_META.avatar,
        isLeader: true,
      }, {
        avatar: MOCK_USER_META.avatar,
        isLeader: false,
      },
    ],
    teamName: '队伍名字A',
  },
  teamB: {
    position: '南北',
    score: '过A',
    member: [
      {
        avatar: MOCK_USER_META.avatar,
        isLeader: true,
      }, {
        avatar: MOCK_USER_META.avatar,
        isLeader: false,
      },
    ],
    teamName: '队伍名字B',
  },
  progress: '第1/3阶段 64进32',
  tableNum: '66',
  statusText: '进行中',
  isStatusLight: true,
  primaryButton: '确认成绩',
  secondaryButton: '',
  borderButton: '',
  tips: '',
});


const demoList = [
  DEMO_DATA.value,
  {
    ...DEMO_DATA.value,
    primaryButton: '',
    secondaryButton: '等待确认成绩',
    statusText: '已结束',
    isStatusLight: false,
  },
  {
    ...DEMO_DATA.value,
    primaryButton: '',
    secondaryButton: '等待确认成绩',
    borderButton: '查看成绩',
  },
];


const clickPrimaryButton = () => {
  console.log('[clickPrimaryButton]');
};

const clickSecondaryButton = () => {
  console.log('[clickSecondaryButton]');
};

const clickBorderButton = () => {
  console.log('[clickBorderButton]');
};

# API

# Props

参数	说明	类型	默认值
progress	当前阶段	string	-
table-num	桌号	string	-
team-a	左侧队伍信息	object	-
team-b	右侧队伍信息	object	-
status-text	状态文案	Object	-
is-status-light	状态文案是否高亮	boolean	`false`
tips	按钮提示文案	string	-
primary-button	主按钮文案	string	`-`
secondary-button	次按钮文案	string	`-`
border-button	线形按钮文案	string	`-`

# Events

事件名	说明	回调参数
clickPrimaryButton	点击主按钮	-
clickSecondaryButton	点击次按钮	-
clickBorderButton	点击线形按钮	-

横屏

← PopupContainer IM →