Press Next

# MatchMessagesInform AI 办赛赛程通知组件

AI 办赛赛程通知组件，用于展示比赛信息和通知设置开关。

# 引入

import PressMatchMessagesInform from "press-next/press-match-messages-inform/press-match-messages-inform";

# 代码演示

# 基础用法

<template>
  <PressMatchMessagesInform
    :content="content"
    @inform-change="handleInformChange"
  />
</template>

<script setup lang="ts">
import type {
  InformContent,
  InformItem,
} from "press-next/press-match-messages-inform/demo-data";

const content: InformContent = {
  title: "2024年春季电竞联赛决赛",
  time: "2024年4月15日 14:00-18:00",
  addr: "腾讯滨海大厦B2层电竞馆",
  items: [
    {
      id: 1,
      title: "比赛开始提醒",
      state: true,
      icon: "icon-bell",
      type: "start",
    },
    {
      id: 2,
      title: "比赛结果通知",
      state: false,
      icon: "icon-trophy",
      type: "result",
    },
  ],
};

const handleInformChange = (item: InformItem) => {
  console.log("通知设置变更:", item);
};
</script>

# API

# Props

参数 说明 类型 默认值
content 通知内容 InformContent -

# Events

事件名 说明 参数
inform-change 通知设置变更时 InformItem

# InformContent 类型

interface InformContent {
  title: string; // 比赛标题
  time: string; // 比赛时间
  addr: string; // 比赛地点
  items: InformItem[]; // 通知项列表
}

# InformItem 类型

interface InformItem {
  id: string | number; // 唯一标识
  title: string; // 通知项标题
  state: boolean; // 开关状态
  icon: string; // 图标类名
  type: string; // 通知类型
}

# 主题定制

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

# 样式变量

名称 默认值 描述
--pmm-inform-spacing-sm .16rem 小间距
--pmm-inform-spacing-md .24rem 中等间距
--pmm-inform-spacing-lg .4rem 大间距
--pmm-inform-item-height .88rem 开关项高度
--pmm-inform-info-height .44rem 信息项高度
--pmm-inform-icon-width .48rem 图标宽度
--pmm-inform-info-bg rgba(211, 212, 252, .48) 信息背景色
--pmm-inform-border-color rgba(211, 212, 252, .48) 边框色
--pmm-inform-main-color #212124 主文字颜色
--pmm-inform-sub-color rgba(33, 33, 36, .75) 次文字颜色
--pmm-inform-font-size .24rem 字体大小
--pmm-inform-icon-size .28rem 图标字体大小
--pmm-inform-radius .08rem 圆角大小
--pmm-inform-border-width .02rem 边框宽度

← MatchMessagesList →