Press Next

# MatchWatchListPopup 观战列表弹窗

观战列表弹窗组件，用于在底部弹窗中显示观战列表，支持关闭和观战点击交互。

# 特性

  • 📋 列表展示 - 基于 PressMatchWatchList 组件，支持列表数据展示
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • 📱 响应式设计 - 适配不同屏幕尺寸
  • 🔧 插槽支持 - 支持自定义底部内容
  • ⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

  • 电竞比赛观战列表展示
  • 直播房间列表选择
  • 在线游戏房间观战
  • 多房间观战切换

# 引入

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

# 代码演示

# 基础用法

<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: '第 1 组',
      btnText: '观战',
      id: 'group_1',
    },
  },
  {
    watchInfo: {
      groupName: '第 2 组',
      btnText: '观战',
      id: 'group_2',
    },
  },
]);

const handleClose = () => {
  show.value = false;
  console.log('弹窗关闭');
};

const handleWatchClick = (item, index) => {
  console.log('观战点击', item, index);
};
</script>

# 自定义标题

<template>
  <PressMatchWatchListPopup
    :show="show"
    title="选择观战房间"
    :list="watchList"
    @close="show = false"
  />
</template>

# 加载状态

<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;
  // 模拟加载数据
  setTimeout(() => {
    const newData = [
      // ... 新数据
    ];
    watchList.value.push(...newData);
    loading.value = false;
    
    // 判断是否加载完成
    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">自定义按钮</button>
      </div>
    </template>
  </PressMatchWatchListPopup>
</template>

# 自定义主题

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

<style>
.my-custom-theme {
  /* 自定义背景色 */
  --pmwlp-body-background-color: #f5f5f5;
}
</style>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
show 是否显示弹窗 boolean false
title 弹窗标题 string 观战
z-index 弹窗层级 number 100
list 观战列表数据 WatchItemData[] []
loading 是否显示加载状态 boolean false
finished 是否加载完成 boolean true
empty-text 空状态文本 string 暂无观战数据
finish-text 加载完成文本 string ''
empty-image 空状态图片 string ''

# WatchItemData 数据结构

interface WatchItemInfo {
  groupName: string;  // 组名
  btnText?: string;   // 按钮文本
  id?: string;        // 组ID
}

interface WatchItemData {
  watchInfo: WatchItemInfo;
}

# Slots

名称 说明
foot-content 自定义底部内容

# Events

事件名 说明 回调参数
close 弹窗关闭时触发 -
click 点击观战列表项时触发 (item: WatchItemData, index: number)
item: 观战数据项
index: 点击项的索引
load-more 滚动到底部时触发 -

# 注意事项

# 使用建议

  1. 数据格式：list 接收 WatchItemData[] 类型数组，需包含 watchInfo 对象
  2. 弹窗控制：通过 show 属性控制弹窗显示/隐藏
  3. 加载更多：支持 loading 和 finished 状态控制，配合 load-more 事件实现分页加载
  4. 空状态：通过 empty-text 和 empty-image 自定义空状态展示
  5. 插槽扩展：使用 foot-content 插槽可自定义底部内容

# 性能优化

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

# 兼容性

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

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmwlp-body-padding .2rem $spacing-sm 主体区域内边距
--pmwlp-body-background-color $color-surface-default 主体背景色
--pmwlp-body-overflow-y auto 主体垂直滚动方式

← CustomHeader →