GpProgress 赛事阶段

引入

import PressGpProgress from 'press-next/press-gp-progress/press-gp-progress';

export default {
  components: {
    PressGpProgress,
  }
}

代码演示

基础用法

<PressGpProgress
  :stage-list="stageList"
/>

<PressGpProgress
  :stage-list="stageListMore"
/>

const stageList = [
  {
    name: '线上海选赛',
    timeDesc: '11.21-12.15',
    isActive: true,
  },
  {
    name: '线下特色赛',
    timeDesc: '12.16-12.12',
    isActive: false,
  },
];

const stageListMore = [
  {
    name: '线上海选赛',
    timeDesc: '11.21-12.15',
    isActive: false,
  },
  {
    name: '线下特色赛',
    timeDesc: '12.16-12.12',
    isActive: false,
  },
  {
    name: '线下特色赛',
    timeDesc: '12.16-12.12',
    isActive: true,
  },
  {
    name: '线下特色赛',
    timeDesc: '12.16-12.12',
    isActive: false,
  },
  {
    name: '线下特色赛',
    timeDesc: '12.16-12.12',
    isActive: false,
  },
];

API

Props

参数	说明	类型	默认值
stageList	阶段列表	array	-

interface Stage {
  name: string;
  timeDesc: number;
  isActive?: boolean;
}

interface Props {
  stageList: Array<{
    Stage
  }>
}

withDefaults(defineProps<Props>(), {
  stageList: () => ([]),
});

const emits = defineEmits<{
  clickStage: [item: Stage, index: number]
}>();

const clickStage = (stage, index) => {
  emits('clickStage', stage, index);
};