Press Next

# MatchResetPopup 重置比赛弹窗

重置比赛弹窗组件，用于显示比赛重置选择界面，支持多选比赛组并确认重置操作。

# 特性

  • 🎮 比赛重置 - 提供比赛组重置选择功能
  • ✅ 多选支持 - 支持单选、多选和全选操作
  • 🎨 自定义样式 - 丰富的CSS变量支持主题定制
  • 🧩 插槽定制 - 提供多个插槽支持深度自定义
  • 📱 响应式设计 - 适配不同屏幕尺寸
  • ⚡ 轻量高效 - 优化的代码结构，性能出色
  • 🔧 事件回调 - 完整的事件处理机制

# 适用场景

  • 电竞比赛重置操作
  • 团队比赛管理
  • 在线游戏对战重置
  • 体育赛事管理
  • 需要自定义UI风格的比赛系统
  • 品牌定制化的赛事平台

# 引入

import PressMatchResetPopup from 'press-next/press-match-reset-popup/press-match-reset-popup';

# 代码演示

# 基础用法

<template>
  <PressMatchResetPopup
    :show="showPopup"
    :title="title"
    :match-groups="matchGroups"
    @close="handleClose"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';
import PressMatchResetPopup from 'press-next/press-match-reset-popup/press-match-reset-popup.vue';
import { getMockData } from './demo-data';

// 使用模拟数据
const { matchGroups } = getMockData();

const showPopup = ref(false);
const title = ref('重置比赛');

// 事件处理
const handleClose = () => {
  showPopup.value = false;
  console.log('弹窗关闭');
};

const handleConfirm = (selectedIndexes) => {
  console.log('确认重置，选中的组索引:', selectedIndexes);
  showPopup.value = false;
};

// 显示弹窗
const showResetPopup = () => {
  showPopup.value = true;
};
</script>

# 自定义比赛组数据

<template>
  <PressMatchResetPopup
    :show="showPopup"
    :title="'重置选择'"
    :match-groups="customMatchGroups"
    :z-index="200"
    @close="handleClose"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';

const showPopup = ref(false);
const customMatchGroups = ref([
  { title: 'A组决赛', desc: '8支队伍' },
  { title: 'B组决赛', desc: '8支队伍' },
  { title: 'C组决赛', desc: '6支队伍' },
  { title: 'D组决赛', desc: '4支队伍' },
]);

const handleClose = () => {
  showPopup.value = false;
};

const handleConfirm = (selectedIndexes) => {
  const selectedGroups = selectedIndexes.map(index => customMatchGroups.value[index]);
  console.log('选中的比赛组:', selectedGroups);
  showPopup.value = false;
};
</script>

# 自定义样式

<template>
  <PressMatchResetPopup
    :show="showPopup"
    :title="title"
    :match-groups="matchGroups"
    custom-class="custom-reset-popup"
    @close="handleClose"
    @confirm="handleConfirm"
  />
</template>

<script setup>
import { ref } from 'vue';
import { getMockData } from './demo-data';

const { matchGroups } = getMockData();
const showPopup = ref(false);
const title = ref('自定义重置');

const handleClose = () => {
  showPopup.value = false;
};

const handleConfirm = (selectedIndexes) => {
  console.log('确认重置:', selectedIndexes);
  showPopup.value = false;
};
</script>

<style>
.custom-reset-popup {
  --rp-content-item-background-color: #f0f8ff;
  --rp-footer-confirm-background: #1890ff;
  --rp-content-item-info-title-color: #1890ff;
}
</style>

# 自定义插槽

<template>
  <PressMatchResetPopup
    :show="showPopup"
    :title="title"
    :match-groups="matchGroups"
    @close="handleClose"
    @confirm="handleConfirm"
  >
    <!-- 自定义比赛组卡片插槽 -->
    <template #match-groups-card>
      <div
        v-for="(item, index) in matchGroups"
        :key="index"
        :class="['custom-match-item', { 'custom-match-item--selected': selectedGroups.includes(index) }]"
        @click="toggleSelection(index)"
      >
        <div class="custom-match-item__checkbox">
          <div :class="['custom-checkbox-icon', { 'custom-checkbox-icon--selected': selectedGroups.includes(index) }]">
            {{ selectedGroups.includes(index) ? '✓' : '' }}
          </div>
        </div>
        <div class="custom-match-item__info">
          <div class="custom-match-item__title">{{ item.title }}</div>
          <div class="custom-match-item__desc">{{ item.desc }}</div>
        </div>
      </div>
    </template>

    <!-- 自定义全选按钮插槽 -->
    <template #all-checked-btn>
      <div class="custom-select-all" @click="toggleSelectAll">
        <div class="custom-select-all__checkbox">
          <div :class="['custom-select-all__icon', { 'custom-select-all__icon--selected': isAllSelected }]">
            {{ isAllSelected ? '♦' : '◇' }}
          </div>
        </div>
        <span class="custom-select-all__text">全部选择</span>
      </div>
    </template>

    <!-- 自定义确认按钮插槽 -->
    <template #confirm-btn>
      <button 
        class="custom-confirm-btn"
        :disabled="selectedGroups.length === 0"
        @click="handleConfirm(selectedGroups)"
      >
        确认重置 ({{ selectedGroups.length }})
      </button>
    </template>
  </PressMatchResetPopup>
</template>

<script setup>
import { ref, computed } from 'vue';
import { getMockData } from './demo-data';

const { matchGroups } = getMockData();
const showPopup = ref(false);
const title = ref('自定义插槽');

// 选择状态管理
const selectedGroups = ref([]);
const isAllSelected = computed(() => 
  selectedGroups.value.length === matchGroups.length && matchGroups.length > 0
);

// 切换选择状态
const toggleSelection = (index) => {
  const selectedIndex = selectedGroups.value.indexOf(index);
  if (selectedIndex === -1) {
    selectedGroups.value.push(index);
  } else {
    selectedGroups.value.splice(selectedIndex, 1);
  }
};

// 切换全选状态
const toggleSelectAll = () => {
  if (isAllSelected.value) {
    selectedGroups.value = [];
  } else {
    selectedGroups.value = matchGroups.map((_, index) => index);
  }
};

const handleClose = () => {
  showPopup.value = false;
  selectedGroups.value = [];
};

const handleConfirm = (selectedIndexes) => {
  console.log('确认重置:', selectedIndexes);
  showPopup.value = false;
  selectedGroups.value = [];
};
</script>

<style>
.custom-match-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.custom-match-item--selected {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.custom-checkbox-icon {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.custom-checkbox-icon--selected {
  border-color: white;
  background-color: white;
  color: #ff6b6b;
}

.custom-select-all {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
}

.custom-select-all__icon {
  width: 28px;
  height: 28px;
  border: 2px solid #667eea;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #667eea;
}

.custom-select-all__icon--selected {
  background-color: #667eea;
  color: white;
}

.custom-confirm-btn {
  width: 140px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}

.custom-confirm-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
</style>

# API

# Props

参数 说明 类型 默认值
custom-class 自定义样式类 string ''
show 是否显示弹窗 boolean false
z-index 弹窗层级 number 100
title 弹窗标题 string '重置比赛'
match-groups 比赛组列表 MatchGroup[] []

# MatchGroup 数据结构

interface MatchGroup {
  title: string; // 比赛组标题
  desc: string;  // 比赛组描述
}

# Events

事件名 说明 参数
close 关闭弹窗时触发 -
confirm 确认重置时触发 selectedIndexes: number[]

# Slots

插槽名 说明 参数
match-groups-card 自定义整个比赛组卡片区域 -
all-checked-btn 自定义全选按钮 -
confirm-btn 自定义确认按钮 -

# 方法

方法名 说明 参数 返回值
onClose 关闭弹窗 - -

# 注意事项

# 使用建议

  1. 数据格式：确保 match-groups 数据格式正确，包含 title 和 desc 字段
  2. 事件处理：必须监听 close 和 confirm 事件来处理用户操作
  3. 选择状态：组件会在关闭时自动重置选择状态
  4. 空选择处理：确认时如果没有选中任何组，不会触发 confirm 事件
  5. 层级管理：合理设置 z-index 避免层级冲突
  6. 插槽使用：使用 match-groups-card 插槽时需要自己管理选择状态和交互逻辑
  7. 插槽样式：自定义插槽样式时注意保持良好的用户体验和可访问性

# 性能优化

  • 大量比赛组时建议分页处理
  • 使用 v-show 而不是 v-if 来控制弹窗显示
  • 避免频繁更新 match-groups 数据

# 兼容性

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

# 主题定制

# 样式变量

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

# 尺寸属性 (Width/Height)

名称 默认值 描述
--rp-reset-popup-height 7.48rem 弹窗高度
--rp-footer-height 1.4rem 底部高度
--rp-footer-confirm-width 3.2rem 确认按钮宽度
--rp-footer-confirm-height .8rem 确认按钮高度
--rp-content-item-checkbox-width .28rem 复选框宽度
--rp-content-item-checkbox-height .28rem 复选框高度
--rp-content-item-checkbox-inner-width .28rem 复选框内部宽度
--rp-content-item-checkbox-inner-height .28rem 复选框内部高度
--rp-content-item-checkbox-inner-after-width .16rem 复选框选中标记宽度
--rp-content-item-checkbox-inner-after-height .16rem 复选框选中标记高度
--rp-footer-select-checkbox-width .28rem 全选复选框宽度
--rp-footer-select-checkbox-height .28rem 全选复选框高度
--rp-footer-select-checkbox-inner-width .28rem 全选复选框内部宽度
--rp-footer-select-checkbox-inner-height .28rem 全选复选框内部高度
--rp-footer-select-checkbox-inner-after-width .16rem 全选复选框选中标记宽度
--rp-footer-select-checkbox-inner-after-height .16rem 全选复选框选中标记高度

# 间距属性 (Margin/Padding/Gap)

名称 默认值 描述
--rp-head-padding-top $spacing-md 头部上内边距
--rp-head-margin-bottom .29rem 头部下外边距
--rp-content-item-padding .3rem .4rem 内容项内边距
--rp-content-item-margin-bottom $spacing-md 内容项下外边距
--rp-content-item-checkbox-margin 0 $spacing-xxl 0 0 复选框外边距
--rp-content-item-info-title-margin-bottom $spacing-sm 标题下外边距
--rp-footer-select-gap $spacing-xs 全选区域间距
--rp-footer-select-margin 0 .84rem 0 .28rem 全选区域外边距
--rp-footer-confirm-margin 0 确认按钮外边距

# 颜色属性 (Color/Background)

名称 默认值 描述
--rp-reset-popup-background-color $color-surface-default 弹窗背景色
--rp-head-title-color $color-text-primary 标题文字颜色
--rp-content-item-background-color $color-surface-brand-light 内容项背景色
--rp-content-item-checkbox-inner-background-color $color-surface-default 复选框背景色
--rp-content-item-checkbox-inner-selected-background-color $color-surface-brand-light 复选框选中背景色
--rp-content-item-checkbox-inner-after-background-color $color-surface-brand 复选框选中标记背景色
--rp-content-item-info-title-color #3e4c5a 内容标题颜色
--rp-content-item-info-desc-color #9fabb6 内容描述颜色
--rp-footer-select-checkbox-inner-background-color $color-surface-default 全选复选框背景色
--rp-footer-select-checkbox-inner-selected-background-color $color-surface-brand-light 全选复选框选中背景色
--rp-footer-select-checkbox-inner-after-background-color $color-surface-brand 全选复选框选中标记背景色
--rp-footer-select-text-color #9fabb6 全选文字颜色
--rp-footer-select-text-selected-color $color-text-primary 全选文字选中颜色
--rp-footer-confirm-background $color-surface-brand 确认按钮背景色
--rp-footer-confirm-color $color-border-invert 确认按钮文字颜色

# 字体属性 (Font)

名称 默认值 描述
--rp-head-title-font-size $font-size-md 标题字体大小
--rp-head-title-font-weight $font-weight-bold 标题字体粗细
--rp-content-item-info-title-font-size $font-size-md 内容标题字体大小
--rp-content-item-info-title-font-weight $font-weight-bold 内容标题字体粗细
--rp-content-item-info-desc-font-size $font-size-sm 内容描述字体大小
--rp-footer-select-text-font-size $font-size-md 全选文字字体大小
--rp-footer-confirm-font-size $font-size-md 确认按钮字体大小
--rp-footer-confirm-font-weight $font-weight-bold 确认按钮字体粗细

# 边框属性 (Border/Border-Radius)

名称 默认值 描述
--rp-content-item-border .02rem solid rgba(252, 252, 252, .6) 内容项边框
--rp-content-item-border-radius $border-radius-sm 内容项圆角
--rp-content-item-checkbox-inner-border .02rem solid #c8ced7 复选框边框
--rp-content-item-checkbox-inner-border-radius $border-radius-sm 复选框圆角
--rp-content-item-checkbox-inner-selected-border-color $color-border-brand 复选框选中边框颜色
--rp-content-item-checkbox-inner-after-border-radius $border-radius-circle 复选框选中标记圆角
--rp-footer-select-checkbox-inner-border .02rem solid $color-surface-brand 全选复选框边框
--rp-footer-select-checkbox-inner-border-radius $border-radius-sm 全选复选框圆角
--rp-footer-select-checkbox-inner-selected-border-color $color-border-brand 全选复选框选中边框颜色
--rp-footer-select-checkbox-inner-after-border-radius $border-radius-circle 全选复选框选中标记圆角

# 阴影属性 (Box-Shadow)

名称 默认值 描述
--rp-content-item-box-shadow 0 0 .02rem 0 $color-border-tertiary 内容项阴影

# 定位属性 (Position/Top/Left/Z-Index)

名称 默认值 描述
--rp-content-item-checkbox-inner-selected-position relative 复选框选中定位
--rp-content-item-checkbox-inner-after-content '' 复选框选中标记内容
--rp-content-item-checkbox-inner-after-position absolute 复选框选中标记定位
--rp-content-item-checkbox-inner-after-top 50% 复选框选中标记顶部位置
--rp-content-item-checkbox-inner-after-left 50% 复选框选中标记左侧位置
--rp-footer-select-checkbox-inner-selected-position relative 全选复选框选中定位
--rp-footer-select-checkbox-inner-after-content '' 全选复选框选中标记内容
--rp-footer-select-checkbox-inner-after-position absolute 全选复选框选中标记定位
--rp-footer-select-checkbox-inner-after-top 50% 全选复选框选中标记顶部位置
--rp-footer-select-checkbox-inner-after-left 50% 全选复选框选中标记左侧位置

# 变换属性 (Transform)

名称 默认值 描述
--rp-content-item-checkbox-inner-after-transform translate(-50%, -50%) 复选框选中标记变换
--rp-footer-select-checkbox-inner-after-transform translate(-50%, -50%) 全选复选框选中标记变换

# 布局属性 (Flex)

名称 默认值 描述
--rp-content-flex 1 内容区弹性布局
--rp-content-item-info-flex 1 内容信息弹性布局

# 其他属性 (Others)

名称 默认值 描述
--rp-head-text-align center 头部文字对齐
--rp-content-overflow-y auto 内容垂直滚动
--rp-content-overflow-x hidden 内容水平滚动
--rp-content-item-backdrop-filter blur(.08rem) 内容项背景滤镜

← MatchResultDialog →