Press Next

# MatchMessagesCtrls AI 办赛按钮组操作组件

AI 办赛按钮组操作组件，用于展示一组操作按钮，支持自定义按钮样式、图标和点击事件处理。

# 引入

import PressMatchMessagesCtrls from "press-next/press-match-messages-ctrls/press-match-messages-ctrls";

# 代码演示

# 基础用法

<template>
  <PressMatchMessagesCtrls
    :content="content"
    :icon="icon"
    :bg-color="bgColor"
    @ctrls-button-click="handleButtonClick"
  />
</template>

<script setup lang="ts">
import PressMatchMessagesCtrls from "press-next/press-match-messages-ctrls/press-match-messages-ctrls";
import type {
  CtrlsContent,
  ButtonItem,
} from "press-next/press-match-messages-ctrls/demo-data";

const content: CtrlsContent = {
  ctrlsBtns: [
    {
      id: 1,
      buttonText: "开始比赛",
      type: "primary",
      bgColor: "#5300c3",
      icon: "play",
    },
    {
      id: 2,
      buttonText: "暂停比赛",
      type: "default",
      bgColor: "#ff6b00",
      icon: "pause",
    },
  ],
};

const icon = "setting";
const bgColor = "#5300c3";

const handleButtonClick = (payload: { btn: ButtonItem; index: number }) => {
  console.log("点击按钮:", payload);
};
</script>

# API

# Props

参数 说明 类型 默认值
content 按钮组内容 CtrlsContent -
icon 默认按钮图标 string -
bgColor 默认按钮颜色 string -

# Events

事件名 说明 参数
ctrls-button-click 按钮点击 { btn: ButtonItem, index: number }

# CtrlsContent 类型

属性 说明 类型
ctrlsBtns 按钮列表 ButtonItem[]

# ButtonItem 类型

属性 说明 类型
buttonText 按钮文本 string
id 按钮 ID string | number
bgColor 按钮颜色 string
type 按钮类型 'primary' | 'default'
icon 按钮图标 string

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmm-ctrls-gap .24rem 按钮间距

← MatchMessagesGrouping →