Press Next

# MatchPrizeList

The MatchPrizeList component is used to display match reward information, supporting both grid and list layout modes. Grid mode supports maximum display limit, while list mode shows all prizes.

# Usage

# Grid Layout

<PressMatchPrizeList
  :prizes="prizes"
  layout="grid"
  @prizeClick="handlePrizeClick"
  @moreClick="handleMoreClick"
/>

import { ref } from 'vue';

const prizes = ref([
  {
    id: 1,
    name: 'Champion',
    imageUrl: 'https://example.com/image1.png'
  },
  {
    id: 2,
    name: 'Runner-up',
    imageUrl: 'https://example.com/image2.png'
  },
  {
    id: 3,
    name: 'Third Place',
    imageUrl: 'https://example.com/image3.png'
  },
  {
    id: 4,
    name: 'Participation Prize',
    imageUrl: 'https://example.com/image4.png'
  }
]);

const handlePrizeClick = (prize) => {
  console.log('Prize clicked:', prize);
};

const handleMoreClick = () => {
  console.log('More clicked');
};

# List Layout

<PressMatchPrizeList
  :prizes="listPrizes"
  layout="list"
  @prizeClick="handlePrizeClick"
/>

const listPrizes = ref([
  {
    id: 1,
    name: 'Champion',
    imageUrl: 'https://example.com/image1.png',
    description: 'Two tickets to the Delta Operation Global Finals, one custom limited skin'
  },
  {
    id: 2,
    name: 'Runner-up',
    imageUrl: 'https://example.com/image2.png',
    description: 'One custom limited skin, one set of Little Legend Eggs (10+1)'
  },
  {
    id: 3,
    name: 'Third Place',
    imageUrl: 'https://example.com/image3.png',
    description: 'One set of Little Legend Eggs (10+1), various in-game items'
  }
]);

# API

# Props

Prop Description Type Default
title Title text string 'Match Rewards'
description Description text string 'Rewards will be sent to your account'
prizes Prize list Prize[] []
maxDisplay Maximum display count (grid only) number 3
moreText More button text string 'All Rewards'
layout Layout mode 'grid' | 'list' 'grid'
customClass Custom class name string -

# Prize Data Structure

Key Description Type
id Prize ID string | number
name Prize name string
imageUrl Prize image string
count Prize quantity number
description Prize description (list mode) string

# Events

Event Description Parameters
prizeClick Triggered when prize clicked prize: Prize
moreClick Triggered when more clicked -

# Layout Mode Description

  • Grid Mode (grid): Shows title and description, prizes arranged in grid layout, supports maxDisplay limit and more button
  • List Mode (list): Hides title and description, prizes arranged in list layout, shows all prizes with descriptions, not limited by maxDisplay

← MatchPrizeSet →