Message

简易介绍

message消息提示组件，用于向用户显示操作反馈信息。
可以通过函数式调用 MYMessage() 来显示消息提示。

基础用法

使用函数调用方式显示不同类型的消息提示。

代码演示

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showInfo'>信息提示</MYButton>
        <MYButton @click='showSuccess'>成功提示</MYButton>
        <MYButton @click='showWarning'>警告提示</MYButton>
        <MYButton @click='showError'>错误提示</MYButton>
    </div>
</template>

展开代码

显示关闭按钮

使用showClose属性可以显示关闭按钮。

代码演示

<template>
    <MYButton @click='showClosableMessage'>显示关闭按钮</MYButton>
</template>

展开代码

自定义持续时间

使用duration属性可以自定义消息显示的持续时间。

代码演示

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showShortMessage'>短时间 (1秒)</MYButton>
        <MYButton @click='showLongMessage'>长时间 (10秒)</MYButton>
        <MYButton @click='showPermanentMessage'>永久显示</MYButton>
    </div>
</template>

展开代码

自定义位置

使用position属性可以设置消息显示的位置。

代码演示

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showTopLeft'>左上角</MYButton>
        <MYButton @click='showTopRight'>右上角</MYButton>
        <MYButton @click='showTopCenter'>顶部居中</MYButton>
        <MYButton @click='showBottomLeft'>左下角</MYButton>
        <MYButton @click='showBottomRight'>右下角</MYButton>
        <MYButton @click='showBottomCenter'>底部居中</MYButton>
    </div>
</template>

展开代码

HTML内容支持

使用dangerouslyUseHTMLString属性可以支持HTML内容（注意XSS风险）。

代码演示

<template>
    <MYButton @click='showHTMLMessage'>显示HTML内容</MYButton>
</template>

展开代码

手动关闭控制

可以通过返回值手动控制消息的关闭。

代码演示

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showManualMessage'>显示可手动关闭的消息</MYButton>
        <MYButton @click='closeManualMessage' :disabled='!manualMessageHandle'>
            手动关闭
        </MYButton>
    </div>
</template>

展开代码

关闭回调

使用onClose属性可以在消息关闭时执行回调函数。

代码演示

<template>
    <MYButton @click='showMessageWithCallback'>显示带回调的消息</MYButton>
</template>

展开代码

偏移量设置

使用offset属性可以设置消息容器的偏移量。

代码演示

<template>
    <div style='display: flex; gap: 10px; flex-wrap: wrap;'>
        <MYButton @click='showMessageWithOffset'>带偏移量的消息</MYButton>
        <MYButton @click='showMultipleOffsetMessages'>多个偏移消息</MYButton>
    </div>
</template>

展开代码

组合使用

最后，实现个多种api组合使用实现个完整的消息提示：

代码演示

<template>
    <MYButton @click='showComplexMessage'>组合使用示例</MYButton>
</template>

展开代码

API 参考

函数调用

// 基础用法
MYMessage(options: MessageOption): MessageHandle
MYMessage(content: string): MessageHandle

// 快捷方法
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 参数

参数	说明	类型	可选值	默认值
content	消息内容	string	VNode	—
type	消息类型	string	info/success/warning/error/default	'info'
duration	显示时长(毫秒)	number	—	3000
showClose	显示关闭按钮	sboolean	—	false
dangerouslyUseHTMLString	使用HTML内容	boolean	top-right/top-left/bottom-right/bottom-left/top-center/bottom-center	'top-right'
offset	偏移量	number	—	20
zIndex	层级	number	—	9999
onClose	关闭回调	function	—	''

MessageHandle 返回值

属性	说明	类型
id	消息ID	string
close	关闭消息方法	function

设置全局配置

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

类型定义

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
}