Press Next

# MatchMessagesRounds AI 办赛比赛局数调整组件

AI 办赛比赛局数调整组件，用于选择不同的比赛局数制式（BO1、BO3、BO5 等），支持选择状态和提示信息展示。

# 引入

import PressMatchMessagesRounds from "press-next/press-match-messages-rounds/press-match-messages-rounds";

# 代码演示

# 基础用法

<template>
  <PressMatchMessagesRounds
    :rounds="rounds"
    :tip="tip"
    @round-selected="handleRoundSelected"
  />
</template>

<script setup lang="ts">
import PressMatchMessagesRounds from "press-next/press-match-messages-rounds/press-match-messages-rounds";
import type { RoundItem } from "press-next/press-match-messages-rounds/demo-data";

const rounds: RoundItem[] = [
  { value: "BO1", selected: false },
  { value: "BO3", selected: true },
  { value: "BO5", selected: false },
  { value: "BO7", selected: false },
];

const tip = "BO3表示三局两胜制，BO5表示五局三胜制";

const handleRoundSelected = (round: RoundItem) => {
  console.log("选择的局数:", round);
};
</script>

# API

# Props

参数 说明 类型 默认值
rounds 局数选项列表 RoundItem[] []
tip 提示信息 string ''

# Events

事件名 说明 参数
round-selected 选择局数选项 round: RoundItem 局数项

# RoundItem 类型

属性 说明 类型
value 局数值 string | number
selected 是否选中 boolean

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmm-rounds-spacing-sm .08rem 小间距
--pmm-rounds-spacing-md .24rem 中等间距
--pmm-rounds-item-gap .34rem 项目间距
--pmm-rounds-item-width .8rem 项目宽度
--pmm-rounds-item-height .8rem 项目高度
--pmm-rounds-tip-icon-size .32rem 提示图标尺寸
--pmm-rounds-item-bg rgba(211, 212, 252, 0.48) 项目背景色
--pmm-rounds-item-color #483081 项目文字颜色
--pmm-rounds-item-selected-bg linear-gradient(354deg, #966ffb 0%, #6736f3 100%) 选中项背景色
--pmm-rounds-item-selected-color #fff 选中项文字颜色
--pmm-rounds-tip-bg rgba(237, 123, 47, 0.1) 提示背景色
--pmm-rounds-tip-color #ed7b2f 提示文字颜色
--pmm-rounds-font-size .28rem 项目字体大小
--pmm-rounds-font-weight 700 项目字体粗细
--pmm-rounds-tip-font-size .24rem 提示字体大小
--pmm-rounds-tip-font-weight 400 提示字体粗细
--pmm-rounds-item-radius .08rem 项目圆角

← MatchMessagesSignin →