Press Next

# MatchWatchList 观战列表

观战列表组件，用于显示观战房间列表，支持加载更多和观战点击交互。

# 特性

  • 📋 列表展示 - 支持观战房间列表展示，支持自定义空状态
  • 🔄 加载更多 - 基于 PressList 组件，支持滚动加载更多
  • 🎨 主题定制 - 丰富的CSS变量支持主题定制
  • 📱 响应式设计 - 适配不同屏幕尺寸
  • ⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

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

# 引入

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

# 代码演示

# 基础用法

<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';

// 使用模拟数据
const componentProps = getMockData();

// 事件处理
const onWatchClick = (item, index) => {
  console.log('观战点击', item, index);
};
</script>

# 加载更多

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

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

const onLoadMore = () => {
  loading.value = true;
  // 模拟加载数据
  setTimeout(() => {
    // 加载新数据...
    loading.value = false;
    finished.value = true;
  }, 1000);
};

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

# 空状态

<template>
  <PressMatchWatchList
    :list="[]"
    empty-text="暂无观战房间"
    empty-image="https://example.com/empty.png"
  />
</template>

# 自定义按钮样式

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

<script setup lang="ts">
const watchList = [
  {
    watchInfo: {
      id: 'group_1',
      groupName: '第 1 组',
      btnText: '观战',
    },
  },
  {
    watchInfo: {
      id: 'final_group',
      groupName: '决赛组',
      btnText: '观战',
    },
  },
  {
    watchInfo: {
      id: 'group_ended',
      groupName: '已结束',
      btnText: '查看回放',
    },
  },
];

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

# 自定义主题

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

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

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

<style>
.my-custom-theme {
  /* 列表样式 */
  --pmwl-watch-list-background-color: #f5f5f5;
  
  /* 间距样式 */
  --pmwl-item-margin-bottom: .32rem;
}
</style>

注意：观战项的样式由 PressMatchWatchItem 组件控制，请使用 --pmwi-* 前缀的CSS变量进行定制。详见 PressMatchWatchItem 文档。

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
list 观战列表数据 WatchItemData[] []
loading 是否显示加载状态 boolean false
finished 是否加载完成 boolean false
empty-text 空状态文本 string '暂无观战数据'
finish-text 加载完成文本 string ''
empty-image 空状态图片地址 string -

# WatchItemData 数据结构

// 观战项信息接口
interface WatchItemInfo {
  groupName: string;      // 组名
  btnText?: string;       // 按钮文本
  id?: string;            // 组ID
}

// 观战项数据接口
interface WatchItemData {
  watchInfo: WatchItemInfo;
}

# Events

事件名 说明 回调参数
click 点击观战按钮时触发 (item: WatchItemData, index: number)
load-more 滚动到底部时触发 -

# 注意事项

# 使用建议

  1. 列表自动更新：组件基于 PressList 实现滚动加载，会自动触发加载更多事件
  2. 观战项样式定制：单个观战项的样式由 PressMatchWatchItem 组件控制，使用 --pmwi-* 前缀的CSS变量进行定制。详见 PressMatchWatchItem 文档
  3. 空状态处理：当列表为空时自动展示空状态，可自定义空状态文本和图片
  4. 加载状态管理：通过 loading 和 finished 属性控制加载状态，避免重复加载
  5. 事件处理：通过 click 事件处理观战点击，通过 load-more 事件加载更多数据
  6. 响应式适配：在小屏幕设备上，建议适当调整相关尺寸变量

# 性能优化

  • 组件使用虚拟化节点减少DOM层级
  • 列表基于高性能的 PressList 组件
  • 样式使用CSS变量，便于动态主题切换
  • 支持空状态优化用户体验

# 兼容性

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

# 主题定制

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

注意：观战项的样式由 PressMatchWatchItem 组件控制，请使用 --pmwi-* 前缀的CSS变量进行定制。详见 PressMatchWatchItem 文档。

# 样式变量

# 间距系统 (Spacing)

名称 默认值 描述
--pmwl-item-margin-bottom $spacing-md 观战项底部间距
--pmwl-item-last-child-margin-bottom 0 观战项最后一项底部间距

# 块状系统 (Box Model)

名称 默认值 描述
--pmwl-watch-list-width 100% 列表宽度

# 颜色系统 (Colors)

名称 默认值 描述
--pmwl-watch-list-background-color $color-surface-default 背景色

# 其他属性 (Others)

名称 默认值 描述
--pmwl-watch-list-position relative 列表定位方式

← MatchWatchListPopup →