Press Next

# MatchMessagesAward AI Match Award Setting Component

AI match award setting component for displaying match reward information, supporting multiple award items display and interaction.

# Usage

import PressMatchMessagesAward from 'press-next/press-match-messages-award/press-match-messages-award';

# Basic Usage

# Simple Award

<template>
  <PressMatchMessagesAward
    :content="basicContent"
    @item-click="handleItemClick"
  />
</template>

<script setup>
const basicContent = {
  items: [
    {
      id: 1,
      img: 'https://example.com/award1.png',
      title: 'First Prize',
      text: 'Game Skin Package',
    },
  ],
};

const handleItemClick = (item) => {
  console.log('Award item clicked:', item);
};
</script>

# Multiple Awards

<template>
  <PressMatchMessagesAward
    :content="multipleContent"
    @item-click="handleItemClick"
  />
</template>

<script setup>
const multipleContent = {
  items: [
    {
      id: 1,
      img: 'https://example.com/award1.png',
      title: 'First Prize',
      text: 'Game Skin Package',
    },
    {
      id: 2,
      img: 'https://example.com/award2.png',
      title: 'Second Prize',
      text: 'Game Item Package',
    },
    {
      id: 3,
      img: 'https://example.com/award3.png',
      title: 'Third Prize',
      text: 'Game Coins',
    },
  ],
};
</script>

# Custom Style

<template>
  <PressMatchMessagesAward
    :content="content"
    :style="{ backgroundColor: '#f5f5f5', padding: '16px' }"
    @item-click="handleItemClick"
  />
</template>

# API

# Props

Attribute Description Type Default
content Award content AwardContent {}

# Events

Event Description Parameters
item-click Triggered when item clicked AwardItem

# AwardContent Data Structure

interface AwardContent {
  items: AwardItem[];
}

# AwardItem Data Structure

interface AwardItem {
  id: number | string;  // Unique identifier for award item
  img: string;          // Award image URL
  title: string;        // Award title
  text: string;         // Award description text
}

# Notes

  • The component automatically handles long text display with ellipsis for overflow
  • Award item images are recommended to be square ratio, component will auto-adjust to rounded corners
  • Clicking award items triggers item-click event, can be used for navigation or other interactions

← MatchMessagesBase →