MatchMessagesAward AI办赛奖励设置组件

# MatchMessagesAward AI办赛奖励设置组件

AI办赛奖励设置组件，用于展示比赛奖励信息，支持多个奖励项的展示和交互。

# 引入

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

# 代码演示

# 基础用法

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

<script setup>
const basicContent = {
  items: [
    {
      id: 1,
      img: 'https://example.com/award1.png',
      title: '一等奖',
      text: '游戏皮肤礼包',
    },
  ],
};

const handleItemClick = (item) => {
  console.log('点击奖励项:', item);
};
</script>

# 多个奖励项

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

<script setup>
const multipleContent = {
  items: [
    {
      id: 1,
      img: 'https://example.com/award1.png',
      title: '一等奖',
      text: '游戏皮肤礼包',
    },
    {
      id: 2,
      img: 'https://example.com/award2.png',
      title: '二等奖',
      text: '游戏道具包',
    },
    {
      id: 3,
      img: 'https://example.com/award3.png',
      title: '三等奖',
      text: '游戏金币',
    },
  ],
};
</script>

# 自定义样式

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

# API

# Props

参数	说明	类型	默认值
content	奖励内容	AwardContent	`{}`

# Events

事件名	说明	参数
item-click	点击奖励项时	AwardItem

# AwardContent 数据结构

interface AwardContent {
  items: AwardItem[];
}

# AwardItem 数据结构

interface AwardItem {
  id: number | string;  // 奖励项唯一标识
  img: string;          // 奖励图片URL
  title: string;        // 奖励标题
  text: string;         // 奖励描述文本
}

# 注意事项

组件会自动处理长文本的显示，超出部分会用省略号显示
奖励项图片建议使用正方形比例，组件会自动调整为圆角显示
点击奖励项会触发 item-click 事件，可用于跳转详情页或其他交互

← MatchMessageCompetition MatchMessagesBase →