Press Next

# MatchWatchList

Watch list component for displaying watch room lists with load more and watch click interactions.

# Features

  • 📋 List Display - Support watch room list display with customizable empty state
  • 🔄 Load More - Based on PressList component, support scroll to load more
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • 📱 Responsive Design - Adapt to different screen sizes
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

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

# Import

import PressMatchWatchList from 'press-next/press-match-watch-list/press-match-watch-list';

# Code Demo

# Basic Usage

<template>
  <PressMatchWatchList
    :list="componentProps.list"
    @click="onWatchClick"
  />
</template>

<script setup lang="ts">
import PressMatchWatchList from 'press-next/press-match-watch-list/press-match-watch-list';
import { getMockData } from './demo-data';

// Use mock data
const componentProps = getMockData();

// Event handlers
const onWatchClick = (item, index) => {
  console.log('Watch clicked', item, index);
};
</script>

# Load More

<template>
  <PressMatchWatchList
    :list="watchList"
    :loading="loading"
    :finished="finished"
    @load-more="onLoadMore"
    @click="onWatchClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const watchList = ref([
  { watchInfo: { id: 'group_1', groupName: 'Group 1', btnText: 'Watch' } },
  { watchInfo: { id: 'group_2', groupName: 'Group 2', btnText: 'Watch' } },
]);

const loading = ref(false);
const finished = ref(false);

const onLoadMore = () => {
  loading.value = true;
  // Simulate loading data
  setTimeout(() => {
    // Load new data...
    loading.value = false;
    finished.value = true;
  }, 1000);
};

const onWatchClick = (item, index) => {
  console.log('Watch clicked', item, index);
};
</script>

# Empty State

<template>
  <PressMatchWatchList
    :list="[]"
    empty-text="No watch rooms available"
    empty-image="https://example.com/empty.png"
  />
</template>

# Custom Button Style

<template>
  <PressMatchWatchList
    :list="watchList"
    @click="onWatchClick"
  />
</template>

<script setup lang="ts">
const watchList = [
  {
    watchInfo: {
      id: 'group_1',
      groupName: 'Group 1',
      btnText: 'Watch',
    },
  },
  {
    watchInfo: {
      id: 'final_group',
      groupName: 'Final Group',
      btnText: 'Watch',
    },
  },
  {
    watchInfo: {
      id: 'group_ended',
      groupName: 'Ended',
      btnText: 'View Replay',
    },
  },
];

const onWatchClick = (item, index) => {
  console.log('Watch clicked', item, index);
};
</script>

# Custom Theme

<template>
  <PressMatchWatchList
    custom-class="my-custom-theme"
    :list="watchList"
    @click="onWatchClick"
  />
</template>

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

const onWatchClick = (item, index) => {
  console.log('Watch clicked', item, index);
};
</script>

<style>
.my-custom-theme {
  /* List styles */
  --pmwl-watch-list-background-color: #f5f5f5;
  
  /* Spacing styles */
  --pmwl-item-margin-bottom: .32rem;
}
</style>

Note: The watch item styles are controlled by the PressMatchWatchItem component. Please use CSS variables with the --pmwi-* prefix for customization. See PressMatchWatchItem Documentation.

# API

# Props

Parameter Description Type Default
custom-class Custom style class string ''
list Watch list data WatchItemData[] []
loading Whether to show loading state boolean false
finished Whether loading finished boolean false
empty-text Empty state text string '暂无观战数据'
finish-text Finish loading text string ''
empty-image Empty state image URL string -

# WatchItemData Data Structure

// Watch item info interface
interface WatchItemInfo {
  groupName: string;      // Group name
  btnText?: string;       // Button text
  id?: string;            // Group ID
}

// Watch item data interface
interface WatchItemData {
  watchInfo: WatchItemInfo;
}

# Events

Event Description Parameters
click Triggered when watch button clicked (item: WatchItemData, index: number)
load-more Triggered when scrolled to bottom -

# Notes

# Usage Recommendations

  1. Auto-update List: Based on PressList component, the list will automatically trigger load more events
  2. Watch Item Style Customization: Single watch item styles are controlled by the PressMatchWatchItem component. Use CSS variables with the --pmwi-* prefix for customization. See PressMatchWatchItem Documentation
  3. Empty State Handling: Automatically shows empty state when list is empty, with customizable text and image
  4. Loading State Management: Use loading and finished properties to control loading state and avoid duplicate loading
  5. Event Handling: Use click event to handle watch clicks, use load-more event to load more data
  6. Responsive Adaptation: On small screen devices, consider adjusting related size variables

# Performance Optimization

  • Component uses virtual host to reduce DOM layers
  • List based on high-performance PressList component
  • Styles use CSS variables for easy dynamic theme switching
  • Supports empty state to optimize user experience

# 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.

Note: The watch item styles are controlled by the PressMatchWatchItem component. Please use CSS variables with the --pmwi-* prefix for customization. See PressMatchWatchItem Documentation.

# Style Variables

# Spacing System

Name Default Description
--pmwl-item-margin-bottom $spacing-md Watch item bottom margin
--pmwl-item-last-child-margin-bottom 0 Last watch item bottom margin

# Box Model System

Name Default Description
--pmwl-watch-list-width 100% List width

# Color System

Name Default Description
--pmwl-watch-list-background-color $color-surface-default Background color

# Others

Name Default Description
--pmwl-watch-list-position relative List position

← MatchWatchListPopup →