Press Next

# MatchMessagesText AI 办赛纯文本组件

一个用于显示富文本消息的组件，支持纯文本、标题、链接、信息提示等多种内容类型。

# 引入

import PressMatchMessagesText from "press-next/press-match-messages-text/press-match-messages-text";

# 代码演示

# 基础用法

最简单的用法，传入纯文本字符串：

<template>
  <PressMatchMessagesText
    content="这是一段基础的纯文本内容"
    @link-click="handleLinkClick"
  />
</template>

# 复杂内容

支持包含标题、链接、信息提示的复杂内容：

<template>
  <PressMatchMessagesText
    :content="complexContent"
    @link-click="handleLinkClick"
  />
</template>

<script setup>
const complexContent = {
  paragraphs: [
    [
      { type: "title", text: "赛事通知" },
      { type: "text", text: "您好，您报名的比赛即将开始，请注意以下事项：" },
    ],
    [
      { type: "text", text: "如有疑问，请查看" },
      { type: "link", text: "比赛规则", url: "https://example.com/rules" },
      { type: "text", text: "或联系客服。" },
    ],
    [{ type: "info", text: "温馨提示：请提前10分钟进入比赛房间" }],
  ],
};

const handleLinkClick = (url) => {
  console.log("点击链接:", url);
};
</script>

# 自定义样式

支持通过 style 属性自定义组件整体样式：

<template>
  <PressMatchMessagesText :content="content" :style="customStyles" />
</template>

<script setup>
const customStyles = {
  backgroundColor: "rgba(211, 212, 252, 0.48)",
  borderRadius: "0.08rem",
  padding: "0.24rem",
};
</script>

# 多段落内容

支持多段落文本显示：

<template>
  <PressMatchMessagesText :content="multiParagraphContent" />
</template>

<script setup>
const multiParagraphContent = {
  paragraphs: [
    "第一段：这是第一段内容。",
    "第二段：这是第二段内容。",
    "第三段：这是第三段内容。",
  ],
};
</script>

# API

# Props

参数 说明 类型 默认值
content 显示内容 string | ContentObject -
style 自定义样式 object {}

# ContentObject 类型

interface ContentObject {
  paragraphs: Array<string | Segment[]>;
}

interface Segment {
  type: "text" | "title" | "info" | "link";
  text: string;
  url?: string; // 仅当 type 为 'link' 时需要
}

# Events

事件名 说明 参数
link-click 点击链接时触发 url: string

# 样式变量

组件提供了以下 CSS 变量用于自定义样式：

变量名 默认值 说明
--mmt-text-primary-color #212124 主要文字颜色
--mmt-text-secondary-color rgba(#212124, .6) 次要文字颜色
--mmt-text-link-color #5300c3 链接文字颜色

# 主题定制

# 样式变量

.pm-message-text {
  --mmt-text-primary-color: #333333;
  --mmt-text-secondary-color: #666666;
  --mmt-text-link-color: #1e72ff;
}

← MatchMessagesTime →