消息提示 Message

轻量级的全局消息提示，通过函数调用触发，支持多种消息类型、自动关闭、自定义时长等能力。

基础用法

通过 Message.success() 等方法直接调用，支持 5 种消息类型：text - 文本，success - 成功，warning - 警告，error - 错误，loading - 加载中。

<template>
  <bp-button @click="handleMsg">Open Message</bp-button>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";
import { ref } from "vue";

const num = ref(1);
const handleMsg = () => {
  num.value++;

  Message.success({
    content: `success:${num.value}`,
    plain: false,
    closeable: true,
    position: "top",
    onClose: () => {
      console.log("close");
    },
  });
};
</script>

消息类型

分别调用不同类型的方法展示对应的消息提示。

<template>
  <bp-space :size="16">
    <bp-button @click="Message.text('这是一条文本消息')">Text</bp-button>
    <bp-button @click="Message.success('操作成功')">Success</bp-button>
    <bp-button @click="Message.warning('请注意')">Warning</bp-button>
    <bp-button @click="Message.error('操作失败')">Error</bp-button>
    <bp-button @click="Message.loading('加载中...')">Loading</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";
</script>

简洁模式

设置 plain: true 使用简洁模式，消息样式更加轻量。

<template>
  <bp-space :size="16">
    <bp-button @click="handleDefault">默认样式</bp-button>
    <bp-button @click="handlePlain">简洁模式</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";

const handleDefault = () => {
  Message.success({ content: "默认样式消息" });
};

const handlePlain = () => {
  Message.success({ content: "简洁模式消息", plain: true });
};
</script>

自定义时长

通过 duration 属性控制消息持续时间（毫秒），设置为 0 则不会自动关闭，需配合 closeable: true 手动关闭。

<template>
  <bp-space :size="16">
    <bp-button @click="handleShort">3 秒关闭</bp-button>
    <bp-button @click="handleLong">10 秒关闭</bp-button>
    <bp-button @click="handleManual">手动关闭</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";

const handleShort = () => {
  Message.text({ content: "3 秒后自动关闭", duration: 3000 });
};

const handleLong = () => {
  Message.text({ content: "10 秒后自动关闭", duration: 10000 });
};

const handleManual = () => {
  Message.text({ content: "不会自动关闭，请手动关闭", duration: 0, closeable: true });
};
</script>

弹出位置

通过 position 属性设置消息弹出位置，支持 top（顶部，默认）和 bottom（底部）。

<template>
  <bp-space :size="16">
    <bp-button @click="handleTop">顶部弹出</bp-button>
    <bp-button @click="handleBottom">底部弹出</bp-button>
  </bp-space>
</template>

<script setup lang="ts">
import { Message } from "@birdpaper-ui/components";

const handleTop = () => {
  Message.success({ content: "从顶部弹出", position: "top" });
};

const handleBottom = () => {
  Message.success({ content: "从底部弹出", position: "bottom" });
};
</script>

Message 配置项

id	消息唯一标识，相同 id 会更新而非新建	String	-	-
type	消息类型	String	text	-
content	消息内容	String	-	-
duration	自动关闭的延迟时间（毫秒），0 表示不自动关闭	Number	3000	-
closeable	是否显示关闭按钮	Boolean	-	-
plain	是否使用简洁模式	Boolean	-	-
position	消息弹出位置	String	top	-
onClose	消息关闭时的回调函数	Function	-	-

Message 方法

Message.text	弹出文本消息	config: MessageInstance	-	-
Message.success	弹出成功消息	config: MessageInstance	-	-
Message.warning	弹出警告消息	config: MessageInstance	-	-
Message.error	弹出错误消息	config: MessageInstance	-	-
Message.loading	弹出加载消息	config: MessageInstance	-	-
Message.removeAll	清除所有消息	-	-	-