Message 全局提示

全局展示操作反馈信息，用于向用户反馈操作结果或当前系统状态，显示在页面顶部居中。

基础用法

提供 success、error、warning、info 四种类型

vue

<script setup lang="ts">
import { message, AButton, ASpace } from '@lite-code/aui-vue'
</script>

<template>
  <ASpace :gap="8" style="flex-wrap: wrap">
    <AButton @click="message.success('操作成功')">成功</AButton>
    <AButton variant="outline" @click="message.error('操作失败')">错误</AButton>
    <AButton variant="outline" @click="message.warning('注意风险')">警告</AButton>
    <AButton variant="outline" @click="message.info('这是一条提示')">信息</AButton>
  </ASpace>
</template>

Loading 异步

loading 类型默认不自动关闭，手动调用返回的 close 函数关闭

vue

<script setup lang="ts">
import { message, AButton } from '@lite-code/aui-vue'

function handleClick() {
  const close = message.loading('提交中，请稍候...', 0)
  setTimeout(() => {
    close()
    message.success('提交成功！')
  }, 2500)
}
</script>

<template>
  <AButton @click="handleClick">模拟异步提交</AButton>
</template>

可关闭

设置 closable: true 后右侧出现关闭按钮；duration: 0 不自动消失

vue

<script setup lang="ts">
import { message, AButton, ASpace } from '@lite-code/aui-vue'
</script>

<template>
  <ASpace :gap="8" style="flex-wrap: wrap">
    <AButton @click="message.success('操作成功，点击 × 关闭', { closable: true })">
      成功（可关闭）
    </AButton>
    <AButton
      variant="outline"
      @click="message.error('发生错误，点击 × 关闭', { closable: true, duration: 0 })"
    >
      错误（不自动消失）
    </AButton>
    <AButton variant="outline" @click="message.closeAll()">关闭全部</AButton>
  </ASpace>
</template>

自定义时长

duration 单位为秒，默认 3s；设为 0 则不自动关闭，需手动调用返回的 close 函数

vue

<script setup lang="ts">
import { message, AButton, ASpace } from '@lite-code/aui-vue'

function manualClose() {
  const close = message.info('手动关闭', 0)
  setTimeout(close, 5000)
}
</script>

<template>
  <ASpace :gap="8">
    <AButton @click="message.info('1 秒后消失', 1)">1s</AButton>
    <AButton variant="outline" @click="message.info('默认 3 秒消失')">3s（默认）</AButton>
    <AButton variant="outline" @click="manualClose">手动关闭（5s 后自动）</AButton>
  </ASpace>
</template>

API

message 对象

方法	说明	参数
message.success()	成功提示	(content: string, options?: number | MessageOptions)
message.error()	错误提示	(content: string, options?: number | MessageOptions)
message.warning()	警告提示	(content: string, options?: number | MessageOptions)
message.info()	信息提示	(content: string, options?: number | MessageOptions)
message.loading()	加载提示（默认不自动关闭）	(content: string, options?: number | MessageOptions)
message.closeAll()	关闭所有提示	—

所有方法均返回 () => void，调用可手动关闭对应消息。

MessageOptions

属性	类型	默认值	说明
duration	number	3	自动关闭秒数；0 表示不自动关闭
key	string	—	唯一标识，相同 key 的消息会被替换而非叠加
closable	boolean	false	是否显示右侧关闭按钮