Press Next

# MatchWatchItem 观战项

用于展示比赛组信息和提供观战入口的组件，支持自定义按钮文本和插槽。

# 特性

  • 🎯 灵活配置 - 支持多种按钮类型和样式配置
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • 📱 响应式设计 - 适配不同屏幕尺寸
  • 🔧 插槽支持 - 支持自定义左右区域内容
  • ⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

  • 电竞比赛观战入口
  • 游戏房间列表
  • 在线比赛观看
  • 直播间列表展示

# 引入

import PressMatchWatchItem from 'press-next/press-match-watch-item/press-match-watch-item';

# 代码演示

# 基础用法

<template>
  <PressMatchWatchItem
    :watch-info="watchInfo"
    @click="handleClick"
  />
</template>

<script setup lang="ts">
import PressMatchWatchItem from 'press-next/press-match-watch-item/press-match-watch-item';

const watchInfo = {
  groupName: '第 1 组',
  btnText: '观战',
  id: 'group_1',
};

const handleClick = (watchInfo) => {
  console.log('点击观战:', watchInfo);
};
</script>

# 不同组名展示

<template>
  <div class="watch-list">
    <!-- 普通组 -->
    <PressMatchWatchItem
      :watch-info="group1"
      @click="handleClick"
    />
    
    <!-- 决赛组 -->
    <PressMatchWatchItem
      :watch-info="finalGroup"
      @click="handleClick"
    />
    
    <!-- 半决赛组 -->
    <PressMatchWatchItem
      :watch-info="semiFinalGroup"
      @click="handleClick"
    />
  </div>
</template>

<script setup lang="ts">
const group1 = {
  groupName: '第 1 组',
  btnText: '观战',
  id: 'group_1',
};

const finalGroup = {
  groupName: '决赛组',
  btnText: '观战',
  id: 'final_group',
};

const semiFinalGroup = {
  groupName: '半决赛A组',
  btnText: '观战',
  id: 'semi_final_a',
};

const handleClick = (watchInfo) => {
  console.log('点击观战:', watchInfo);
};
</script>

# 按钮类型

<template>
  <!-- 默认按钮 -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-type="default"
    @click="handleClick"
  />

  <!-- 主要按钮 -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-type="primary"
    @click="handleClick"
  />
  
  <!-- 朴素按钮 -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-type="primary"
    :button-plain="true"
    @click="handleClick"
  />
  
  <!-- 不同尺寸 -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-size="large"
    @click="handleClick"
  />

  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-size="small"
    @click="handleClick"
  />
  
  <!-- 禁用状态 -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    :button-disabled="true"
    @click="handleClick"
  />
</template>

# 自定义插槽

<template>
  <!-- 自定义左侧区域 -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    @click="handleClick"
  >
    <template #left-area>
      <div class="custom-group">
        <span class="custom-group__icon">🏆</span>
        <span class="custom-group__name">{{ watchInfo.groupName }}</span>
      </div>
    </template>
  </PressMatchWatchItem>

  <!-- 自定义右侧区域 -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    @click="handleClick"
  >
    <template #right-area>
      <button class="custom-btn" @click="handleCustomWatch">
        🎮 观战
      </button>
    </template>
  </PressMatchWatchItem>

  <!-- 自定义左右区域 -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    @click="handleClick"
  >
    <template #left-area>
      <div class="custom-group">
        <span class="group-badge">VIP</span>
        <span>{{ watchInfo.groupName }}</span>
      </div>
    </template>
    
    <template #right-area>
      <div class="action-buttons">
        <button @click="handleWatch">观战</button>
        <button @click="handleShare">分享</button>
      </div>
    </template>
  </PressMatchWatchItem>
</template>

# 自定义主题

<template>
  <PressMatchWatchItem
    custom-class="my-custom-theme"
    :watch-info="watchInfo"
    @click="handleClick"
  />
</template>

<style>
.my-custom-theme {
  /* 卡片样式 */
  --pmwi-watch-item-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --pmwi-group-name-color: #ffffff;
  
  /* 按钮样式 */
  --pmwi-watch-btn-border-radius: .4rem;
  --pmwi-watch-btn-bg: #667eea;
}
</style>

# API

# Props

参数 说明 类型 默认值
watch-info 观战项信息，包含组名、按钮文本等 WatchItemInfo -
custom-class 自定义样式类 string ''
button-type 按钮类型 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
button-plain 是否为朴素按钮 boolean true
button-size 按钮尺寸 'normal' | 'large' | 'small' | 'mini' 'small'
button-open-type 微信开放能力 string ''
button-disabled 按钮是否禁用 boolean false
button-custom-style 自定义按钮样式 object {}

# WatchItemInfo 数据结构

interface WatchItemInfo {
  groupName: string;      // 组名（必填）
  btnText?: string;       // 按钮文本（可选）
  id?: string;            // 组ID（可选）
}

# Slots

名称 说明
left-area 自定义左侧区域内容，默认显示组名
right-area 自定义右侧区域内容，默认显示观战按钮

# Events

事件名 说明 回调参数
click 点击观战按钮时触发 watchInfo: WatchItemInfo - 当前观战项信息

# 注意事项

# 使用建议

  1. 观战项数据：watch-info 需要提供组名（groupName），按钮文本（btnText）和组ID（id）为可选项
  2. 按钮配置：支持多种按钮类型（primary、info、warning、danger）、尺寸（normal、large、small、mini）和朴素模式
  3. 微信开放能力：通过 button-open-type 属性可以使用微信小程序的开放能力（如分享、获取手机号等）
  4. 自定义插槽：提供 left-area 和 right-area 两个插槽，可以完全自定义左右区域内容
  5. 响应式适配：在小屏幕设备上，建议适当调整相关尺寸变量

# 性能优化

  • 组件使用虚拟化节点减少DOM层级
  • 样式使用CSS变量，便于动态主题切换
  • 支持自定义插槽，灵活扩展功能

# 兼容性

  • 支持 Vue 3.0+
  • 兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
  • 支持微信小程序、支付宝小程序等平台

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

# 间距系统

名称 默认值 描述
--pmwi-watch-item-padding .28rem .4rem 观战项内边距
--pmwi-watch-item-margin-bottom $spacing-md 观战项下边距
--pmwi-group-name-margin-right $spacing-sm 组名右边距
--pmwi-watch-btn-margin 0 观战按钮边距
--pmwi-watch-btn-padding 0 .2rem 观战按钮内边距

# 块状系统

名称 默认值 描述
--pmwi-watch-item-box-sizing border-box 观战项盒模型
--pmwi-watch-item-height .98rem 观战项高度
--pmwi-group-name-flex 1 组名弹性值
--pmwi-watch-btn-width 1.28rem 观战按钮宽度
--pmwi-watch-btn-height .5rem 观战按钮高度

# 边框系统

名称 默认值 描述
--pmwi-watch-item-border-width 0 观战项边框宽度
--pmwi-watch-item-border-style solid 观战项边框样式
--pmwi-watch-item-border-color $color-border-brand 观战项边框颜色
--pmwi-watch-item-border-left-width 0 观战项左边框宽度
--pmwi-watch-item-border-left-style solid 观战项左边框样式
--pmwi-watch-item-border-left-color $color-border-brand 观战项左边框颜色
--pmwi-watch-item-border-radius $border-radius-xs 观战项圆角
--pmwi-watch-item-box-shadow none 观战项盒子阴影
--pmwi-watch-btn-border-color $color-border-brand 观战按钮边框颜色
--pmwi-watch-btn-border-radius $border-radius-999 观战按钮圆角
--pmwi-watch-btn-disabled-border-color $color-border-tertiary 观战按钮禁用边框颜色

# 背景系统

名称 默认值 描述
--pmwi-watch-item-bg $color-surface-brand-light 观战项背景色
--pmwi-watch-btn-bg transparent 观战按钮背景色
--pmwi-watch-btn-active-bg transparent 观战按钮激活背景色
--pmwi-watch-btn-active-before-bg transparent 观战按钮激活前背景色

# 文本系统

名称 默认值 描述
--pmwi-group-name-color $color-text-secondary 组名文字颜色
--pmwi-group-name-font-size $font-size-md 组名字体大小
--pmwi-group-name-font-weight $font-weight-bold 组名字体粗细
--pmwi-group-name-line-height 1.5 组名行高
--pmwi-watch-btn-color $color-text-brand 观战按钮文字颜色
--pmwi-watch-btn-font-size $font-size-sm 观战按钮字体大小
--pmwi-watch-btn-font-weight $font-weight-bold 观战按钮字体粗细
--pmwi-watch-btn-line-height 1.5 观战按钮行高
--pmwi-watch-btn-disabled-color $color-text-invert-dark 观战按钮禁用文字颜色

# 其他属性

名称 默认值 描述
--pmwi-watch-btn-disabled-opacity 1 观战按钮禁用时的透明度

← MatchWatchList →