Press Next

# WatchListPopup

Watch list popup component for displaying watch lists in a bottom popup with close and watch click interactions.

# Features

  • 📋 List Display - Based on PressMatchWatchList component, supports list data display
  • 🎨 Theme Customization - Rich CSS variables for theme customization
  • 📱 Responsive Design - Adapts to different screen sizes
  • 🔧 Slot Support - Supports custom footer content
  • ⚡ Lightweight & Efficient - Optimized code structure with excellent performance

# Use Cases

  • E-sports match watch list display
  • Live room list selection
  • Online game room watching
  • Multi-room watch switching

# Import

import PressMatchWatchListPopup from 'press-next/press-match-watch-list-popup/press-match-watch-list-popup';

# Code Demo

# Basic Usage

<template>
  <PressMatchWatchListPopup
    :show="show"
    :list="watchList"
    @close="handleClose"
    @click="handleWatchClick"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchWatchListPopup from 'press-next/press-match-watch-list-popup/press-match-watch-list-popup';

const show = ref(false);

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

const handleClose = () => {
  show.value = false;
  console.log('Popup closed');
};

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

# Custom Title

<template>
  <PressMatchWatchListPopup
    :show="show"
    title="Select Watch Room"
    :list="watchList"
    @close="show = false"
  />
</template>

# LoadingPlus State

<template>
  <PressMatchWatchListPopup
    :show="show"
    :list="watchList"
    :loading="loading"
    :finished="finished"
    @load-more="handleLoadMore"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import PressMatchWatchListPopup from 'press-next/press-match-watch-list-popup/press-match-watch-list-popup';

const show = ref(true);
const loading = ref(false);
const finished = ref(false);
const watchList = ref([]);

const handleLoadMore = () => {
  if (loading.value || finished.value) return;
  
  loading.value = true;
  // Simulate loading data
  setTimeout(() => {
    const newData = [
      // ... new data
    ];
    watchList.value.push(...newData);
    loading.value = false;
    
    // Check if finished
    if (watchList.value.length >= 20) {
      finished.value = true;
    }
  }, 1000);
};
</script>

<template>
  <PressMatchWatchListPopup
    :show="show"
    :list="watchList"
  >
    <template #foot-content>
      <div class="custom-footer">
        <button @click="handleCustomAction">Custom Button</button>
      </div>
    </template>
  </PressMatchWatchListPopup>
</template>

# Custom Theme

<template>
  <PressMatchWatchListPopup
    custom-class="my-custom-theme"
    :show="show"
    :list="watchList"
  />
</template>

<style>
.my-custom-theme {
  /* Custom background color */
  --pmwlp-body-background-color: #f5f5f5;
}
</style>

# API

# Props

Attribute Description Type Default
custom-class Custom CSS class string ''
show Whether to show popup boolean false
title PopupPlus title string 观战
z-index PopupPlus z-index number 100
list Watch list data WatchItemData[] []
loading Whether to show loading state boolean false
finished Whether loading is finished boolean true
empty-text Empty state text string 暂无观战数据
finish-text Finished text string ''
empty-image Empty state image string ''

# WatchItemData Data Structure

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

interface WatchItemData {
  watchInfo: WatchItemInfo;
}

# Slots

Name Description
foot-content Custom footer content

# Events

Event Description Parameters
close Triggered when popup is closed -
click Triggered when watch list item clicked (item: WatchItemData, index: number)
item: Watch data item
index: Index of clicked item
load-more Triggered when scrolled to bottom -

# Notes

# Usage Recommendations

  1. Data Format: list accepts WatchItemData[] type array, must contain watchInfo object
  2. Popup Control: Control popup show/hide through show property
  3. Load More: Supports loading and finished state control, implement pagination loading with load-more event
  4. Empty State: Customize empty state display through empty-text and empty-image
  5. Slot Extension: Use foot-content slot to customize footer content

# Performance Optimization

  • Component uses virtualized nodes to reduce DOM hierarchy
  • List based on high-performance PressMatchWatchList sub-component
  • Styles use CSS variables for 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, which can be used to customize styles. For usage, please refer to ConfigProvider component.

# CSS Variables

Name Default Value Description
--pmwlp-body-padding .2rem $spacing-sm Body padding
--pmwlp-body-background-color $color-surface-default Body background color
--pmwlp-body-overflow-y auto Body vertical overflow

← CustomHeader →