Press Next

# MatchMessagesText AI Match Messages Text Component

A component for displaying rich text messages, supporting various content types including plain text, titles, links, and info tips.

# Import

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

# Usage

# Basic Usage

The simplest usage with plain text string:

<template>
  <PressMatchMessagesText
    content="This is a basic plain text content"
    @link-click="handleLinkClick"
  />
</template>

# Complex Content

Support complex content with titles, links, and info tips:

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

<script setup>
const complexContent = {
  paragraphs: [
    [
      { type: "title", text: "Match Notification" },
      {
        type: "text",
        text: "Hello, your registered match is about to start. Please note:",
      },
    ],
    [
      { type: "text", text: "For questions, please check " },
      { type: "link", text: "Match Rules", url: "https://example.com/rules" },
      { type: "text", text: " or contact customer service." },
    ],
    [
      {
        type: "info",
        text: "Tip: Please enter the match room 10 minutes early",
      },
    ],
  ],
};

const handleLinkClick = (url) => {
  console.log("Link clicked:", url);
};
</script>

# Custom Styles

Support custom component styles through the style prop:

<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>

# Multi-paragraph Content

Support multi-paragraph text display:

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

<script setup>
const multiParagraphContent = {
  paragraphs: [
    "First paragraph: This is the first paragraph content.",
    "Second paragraph: This is the second paragraph content.",
    "Third paragraph: This is the third paragraph content.",
  ],
};
</script>

# API

# Props

Prop Description Type Default
content Display content string | ContentObject -
style Custom styles object {}

# ContentObject Type

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

interface Segment {
  type: "text" | "title" | "info" | "link";
  text: string;
  url?: string; // Required only when type is 'link'
}

# Events

Event Name Description Parameters
link-click Triggered when link clicked url: string

← MatchMessagesTime →