消息提示 Message

基础用法

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

Message 配置项

id	消息 ID	String	-	-
type	消息类型	String	text	-
content	内容	String	-	-
duration	持续时间(ms)	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	清除所有消息	-	-	-