消息提示 Message

用于全局文本提示反馈。

基础用法

通过调用 Message 方法弹出消息提示。

<template>
  <bp-button @click="handleClick">Text message</bp-button>
</template>

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

const handleClick = () => {
  Message.text("This is a text message.");
};
</script>

消息类型

除了纯文本外，还提供了3种提示类型，分别是success - 成功提示，warning - 警告提示，error - 错误提示，以及对应两套不同的展现样式。

<template>
  <bp-space type="vertical" size="small">
    <div>
      <p class="demo-text">No background or border.</p>
      <bp-space>
        <bp-button type="plain" @click="handleClick('success', true)">Success</bp-button>
        <bp-button type="plain" @click="handleClick('warning', true)">Warning</bp-button>
        <bp-button type="plain" @click="handleClick('error', true)">Error</bp-button>
      </bp-space>
    </div>
    <div>
      <p class="demo-text">With background and border.</p>
      <bp-space>
        <bp-button type="plain" status="success" @click="handleClick('success')">Success</bp-button>
        <bp-button type="plain" status="warning" @click="handleClick('warning')">Warning</bp-button>
        <bp-button type="plain" status="danger" @click="handleClick('error')">Error</bp-button>
      </bp-space>
    </div>
  </bp-space>
</template>

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

const handleClick = (type: "success" | "warning" | "error", plain: boolean = false) => {
  Message[type]({ content: `This is a ${type} message.`, plain });
};
</script>

<style lang="less" scoped>
.demo-text {
  color: #595959;
  font-size: 13px;
  margin: 0 0 4px 0;
}
</style>

加载提示

提供 loading 方法展示加载状态，并在结束时调用 close 方法结束加载。

<template>
  <bp-button @click="handleClick">Loading</bp-button>
</template>

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

const handleClick = () => {
  const msg = Message.loading("Loading...");

  setTimeout(() => {
    msg.remove();
  }, 4000);
};
</script>

提示的位置

支持顶部和底部两个位置弹出全局提示

<template>
  <bp-space>
    <bp-button @click="handleClick('top')">Top</bp-button>
    <bp-button @click="handleClick('bottom')">Bottom</bp-button>
  </bp-space>
</template>

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

const handleClick = (position: "top" | "bottom") => {
  Message.text({ content: "This is a text message.", position });
};
</script>

可关闭提示

可通过配置中的 closeable 属性控制是否支持手动关闭选项。

<template>
  <bp-button @click="handleClick">Closeable message</bp-button>
</template>

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

const handleClick = () => {
  Message.text({
    content: "This is a message that can be close.",
    closeable: true,
    duration: 10000,
  });
};
</script>

Message 方法

text	文本提示类型	string \| MessageItem	remove()
success	成功提示类型	string \| MessageItem	remove()
warning	警告提示类型	string \| MessageItem	remove()
error	错误提示类型	string \| MessageItem	remove()
loading	加载提示类型	string \| MessageItem	remove()
removeAll	移除所有消息提示	-	-

MessageItem 属性

id	唯一ID	String	-
type	消息提示类型	Enum	-
content	消息提示内容	String	-
duration	关闭延迟时间	Number	3000
closeable	是否允许关闭	Boolean	false
plain	是否开启无背景展示	Boolean	false
position	消息提示的定位	Enum	top
onClose	关闭后的回调函数	Function	-

消息提示 Message ​

基础用法 ​

消息类型 ​

加载提示 ​

提示的位置 ​

可关闭提示 ​

Message 方法 ​

MessageItem 属性 ​