Message

Introduction

The message component is used to display operation feedback information to users.
You can display message prompts through functional calls like MYMessage().

Basic Usage

Use function calls to display different types of message prompts.

Code Demo

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showInfo'>Info</MYButton>
        <MYButton @click='showSuccess'>Success</MYButton>
        <MYButton @click='showWarning'>Warning</MYButton>
        <MYButton @click='showError'>Error</MYButton>
    </div>
</template>

展开代码

Show Close Button

Use the showClose prop to display a close button.

Code Demo

<template>
    <MYButton @click='showClosableMessage'>Show Close Button</MYButton>
</template>

展开代码

Custom Duration

Use the duration prop to customize how long the message is displayed.

Code Demo

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showShortMessage'>Short (1s)</MYButton>
        <MYButton @click='showLongMessage'>Long (10s)</MYButton>
        <MYButton @click='showPermanentMessage'>Permanent</MYButton>
    </div>
</template>

展开代码

Custom Position

Use the position prop to set the display position of the message.

Code Demo

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showTopLeft'>Top Left</MYButton>
        <MYButton @click='showTopRight'>Top Right</MYButton>
        <MYButton @click='showTopCenter'>Top Center</MYButton>
        <MYButton @click='showBottomLeft'>Bottom Left</MYButton>
        <MYButton @click='showBottomRight'>Bottom Right</MYButton>
        <MYButton @click='showBottomCenter'>Bottom Center</MYButton>
    </div>
</template>

展开代码

HTML Content Support

Use the dangerouslyUseHTMLString prop to support HTML content (be aware of XSS risks).

Code Demo

<template>
    <MYButton @click='showHTMLMessage'>Show HTML Content</MYButton>
</template>

展开代码

Manual Close Control

You can manually control the closing of a message via the return value.

Code Demo

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showManualMessage'>Show Manually Closable Message</MYButton>
        <MYButton @click='closeManualMessage' :disabled='!manualMessageHandle'>
            Manual Close
        </MYButton>
    </div>
</template>

展开代码

Close Callback

Use the onClose prop to execute a callback function when the message is closed.

Code Demo

<template>
    <MYButton @click='showMessageWithCallback'>Show Message with Callback</MYButton>
</template>

展开代码

Offset Setting

Use the offset prop to set the offset of the message container.

Code Demo

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showMessageWithOffset'>Message with Offset</MYButton>
        <MYButton @click='showMultipleOffsetMessages'>Multiple Offset Messages</MYButton>
    </div>
</template>

展开代码

Combined Usage

Finally, here's an example combining multiple APIs for a complete message prompt:

Code Demo

<template>
    <MYButton @click='showComplexMessage'>Combined Usage Example</MYButton>
</template>

展开代码

API Reference

Function Calls

// Basic usage
MYMessage(options: MessageOption): MessageHandle
MYMessage(content: string): MessageHandle

// Shortcut methods
MYMessage.success(content: string, options?: MessageOption): MessageHandle
MYMessage.info(content: string, options?: MessageOption): MessageHandle
MYMessage.warning(content: string, options?: MessageOption): MessageHandle
MYMessage.error(content: string, options?: MessageOption): MessageHandle
MYMessage.default(content: string, options?: MessageOption): MessageHandle

MessageOption Parameters

Parameter	Description	Type	Options	Default
content	Message content	string | VNode	—	—
type	Message type	string	info/success/warning/error/default	'info'
duration	Display duration (ms)	number	—	3000
showClose	Show close button	boolean	—	false
dangerouslyUseHTMLString	Use HTML content	boolean	—	false
position	Message position	string	top-right/top-left/bottom-right/bottom-left/top-center/bottom-center	'top-right'
offset	Offset value	number	—	20
zIndex	z-index value	number	—	9999
onClose	Close callback	function	—	—

MessageHandle Return Value

Property	Description	Type
id	Message ID	string
close	Close message method	function

Global Configuration

MYMessage.config({
  duration: 5000,
  position: 'top-center',
  max: 5,
  offset: 30,
  zIndex: 10000
})

Type Definitions

type MessageType = 'info' | 'success' | 'warning' | 'error' | 'default'

type Position = 
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'
  | 'top-center'
  | 'bottom-center'

interface MessageOption {
  id?: string
  content?: string | VNode
  type?: MessageType
  duration?: number
  showClose?: boolean
  dangerouslyUseHTMLString?: boolean
  position?: Position
  offset?: number
  zIndex?: number
  onClose?: () => void
}

interface MessageHandle {
  id: string
  close: () => void
}

interface MessageGlobalConfig {
  duration?: number
  position?: Position
  max?: number
  offset?: number
  zIndex?: number
}