Press Next

# MatchWatchItem

A watch item component used to display match group information and provide watch entry, supports custom button text and slots.

# Features

  • 🎯 Flexible Configuration - Supports multiple button types and style configurations
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • 📱 Responsive Design - Adapt to different screen sizes
  • 🔧 Slot Support - Support custom left and right area content
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • E-sports match watch entry
  • Game room list
  • Online match viewing
  • Live room list display

# Import

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

# Code Demo

# Basic Usage

<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: 'Group 1',
  btnText: 'Watch',
  id: 'group_1',
};

const handleClick = (watchInfo) => {
  console.log('Click watch:', watchInfo);
};
</script>

# Different Group Names

<template>
  <div class="watch-list">
    <!-- Regular group -->
    <PressMatchWatchItem
      :watch-info="group1"
      @click="handleClick"
    />
    
    <!-- Final group -->
    <PressMatchWatchItem
      :watch-info="finalGroup"
      @click="handleClick"
    />
    
    <!-- Semi-final group -->
    <PressMatchWatchItem
      :watch-info="semiFinalGroup"
      @click="handleClick"
    />
  </div>
</template>

<script setup lang="ts">
const group1 = {
  groupName: 'Group 1',
  btnText: 'Watch',
  id: 'group_1',
};

const finalGroup = {
  groupName: 'Final Group',
  btnText: 'Watch',
  id: 'final_group',
};

const semiFinalGroup = {
  groupName: 'Semi-Final A',
  btnText: 'Watch',
  id: 'semi_final_a',
};

const handleClick = (watchInfo) => {
  console.log('Click watch:', watchInfo);
};
</script>

# Button Types

<template>
  <!-- Default button -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-type="default"
    @click="handleClick"
  />

  <!-- Primary button -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-type="primary"
    @click="handleClick"
  />
  
  <!-- Plain button -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-type="primary"
    :button-plain="true"
    @click="handleClick"
  />
  
  <!-- Different sizes -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-size="large"
    @click="handleClick"
  />

  <PressMatchWatchItem
    :watch-info="watchInfo"
    button-size="small"
    @click="handleClick"
  />
  
  <!-- Disabled state -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    :button-disabled="true"
    @click="handleClick"
  />
</template>

# Custom Slots

<template>
  <!-- Custom left area -->
  <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>

  <!-- Custom right area -->
  <PressMatchWatchItem
    :watch-info="watchInfo"
    @click="handleClick"
  >
    <template #right-area>
      <button class="custom-btn" @click="handleCustomWatch">
        🎮 Watch
      </button>
    </template>
  </PressMatchWatchItem>

  <!-- Custom both areas -->
  <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">Watch</button>
        <button @click="handleShare">Share</button>
      </div>
    </template>
  </PressMatchWatchItem>
</template>

# Custom Theme

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

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

# API

# Props

Parameter Description Type Default
watch-info Watch item information, includes group name, button text, etc. WatchItemInfo -
custom-class Custom style class string ''
button-type Button type 'primary' | 'default' | 'info' | 'warning' | 'danger' 'primary'
button-plain Whether button is plain boolean true
button-size Button size 'normal' | 'large' | 'small' | 'mini' 'small'
button-open-type WeChat open capability string ''
button-disabled Whether button is disabled boolean false
button-custom-style Custom button style object {}

# WatchItemInfo Data Structure

interface WatchItemInfo {
  groupName: string;      // Group name (required)
  btnText?: string;       // Button text (optional)
  id?: string;            // Group ID (optional)
}

# Slots

Name Description
left-area Custom left area content, displays group name by default
right-area Custom right area content, displays watch button by default

# Events

Event Description Parameters
click Triggered when watch button is clicked watchInfo: WatchItemInfo - Current watch item information

# Notes

# Usage Recommendations

  1. Watch Item Data: watch-info requires group name (groupName), button text (btnText) and group ID (id) are optional
  2. Button Configuration: Supports multiple button types (primary, info, warning, danger), sizes (normal, large, small, mini), and plain mode
  3. WeChat Open Capabilities: Use button-open-type to access WeChat Mini Program open capabilities (e.g., share, get phone number)
  4. Custom Slots: Provides left-area and right-area slots for complete customization of left and right area content
  5. Responsive Adaptation: On small screen devices, consider adjusting related size variables

# Performance Optimization

  • Component uses virtual host to reduce DOM layers
  • Styles use CSS variables for easy dynamic theme switching
  • Supports custom slots for flexible extension

# Compatibility

  • Supports Vue 3.0+
  • Compatible with modern browsers (Chrome 60+, Firefox 60+, Safari 12+)
  • Supports WeChat Mini Program, Alipay Mini Program and other platforms

# Theme Customization

The component provides the following CSS variables for custom styling. Please refer to the ConfigProvider component for usage.

# Style Variables

# Spacing System

Name Default Description
--pmwi-watch-item-padding .28rem .4rem Watch item padding
--pmwi-watch-item-margin-bottom $spacing-md Watch item bottom margin
--pmwi-group-name-margin-right $spacing-sm Group name right margin
--pmwi-watch-btn-margin 0 Watch button margin
--pmwi-watch-btn-padding 0 .2rem Watch button padding

# Box Model System

Name Default Description
--pmwi-watch-item-box-sizing border-box Watch item box sizing
--pmwi-watch-item-height .98rem Watch item height
--pmwi-group-name-flex 1 Group name flex value
--pmwi-watch-btn-width 1.28rem Watch button width
--pmwi-watch-btn-height .5rem Watch button height

# Border System

Name Default Description
--pmwi-watch-item-border-width 0 Watch item border width
--pmwi-watch-item-border-style solid Watch item border style
--pmwi-watch-item-border-color $color-border-brand Watch item border color
--pmwi-watch-item-border-left-width 0 Watch item left border width
--pmwi-watch-item-border-left-style solid Watch item left border style
--pmwi-watch-item-border-left-color $color-border-brand Watch item left border color
--pmwi-watch-item-border-radius $border-radius-xs Watch item border radius
--pmwi-watch-item-box-shadow none Watch item box shadow
--pmwi-watch-btn-border-color $color-border-brand Watch button border color
--pmwi-watch-btn-border-radius $border-radius-999 Watch button border radius
--pmwi-watch-btn-disabled-border-color $color-border-tertiary Watch button disabled border color

# Background System

Name Default Description
--pmwi-watch-item-bg $color-surface-brand-light Watch item background
--pmwi-watch-btn-bg transparent Watch button background
--pmwi-watch-btn-active-bg transparent Watch button active background
--pmwi-watch-btn-active-before-bg transparent Watch button active before background

# Typography System

Name Default Description
--pmwi-group-name-color $color-text-secondary Group name text color
--pmwi-group-name-font-size $font-size-md Group name font size
--pmwi-group-name-font-weight $font-weight-bold Group name font weight
--pmwi-group-name-line-height 1.5 Group name line height
--pmwi-watch-btn-color $color-text-brand Watch button text color
--pmwi-watch-btn-font-size $font-size-sm Watch button font size
--pmwi-watch-btn-font-weight $font-weight-bold Watch button font weight
--pmwi-watch-btn-line-height 1.5 Watch button line height
--pmwi-watch-btn-disabled-color $color-text-invert-dark Watch button disabled text color

# Others

Name Default Description
--pmwi-watch-btn-disabled-opacity 1 Watch button disabled opacity

← MatchWatchList →