Message 全局提示

基本用法

从顶部出现, 3 秒后自动消失。

<script lang="ts" setup>
import { h } from "vue";
import { LMessage } from "lotus-plus";

const open = () => {
  LMessage("Congrats, this is a success message.");
};

const openVn = () => {
  LMessage({
    message: h("p", { style: "line-height: 1; font-size: 14px" }, [
      h("span", null, "Message can be "),
      h("i", { style: "color: teal" }, "VNode")
    ])
  });
};
</script>
<template>
  <div>
    <l-button @click="open">Show message</l-button>
    <l-button @click="openVn">VNode</l-button>
  </div>
</template>

消息类型

全局提示有 5 种不同的类型, 分别为: info , success , warning , error , loading

<script lang="ts" setup>
import { LMessage } from "lotus-plus";

const open1 = () => {
  LMessage({
    message: "This is a message.",
    type: "info"
  });
};
const open2 = () => {
  LMessage({
    message: "Congrats, this is a success message.",
    type: "success"
  });
};
const open3 = () => {
  LMessage({
    message: "Warning, this is a warning message.",
    type: "warning"
  });
};
const open4 = () => {
  LMessage({
    message: "Oops, this is a error message.",
    type: "error"
  });
};
const open5 = () => {
  LMessage({
    message: "Loading...",
    type: "loading"
  });
};
</script>
<template>
  <div>
    <l-button @click="open1">Info</l-button>
    <l-button @click="open2">Success</l-button>
    <l-button @click="open3">Warning</l-button>
    <l-button @click="open4">Error</l-button>
    <l-button @click="open5">Loading</l-button>
  </div>
</template>

自定义图标

通过 icon 属性可以自定义图标。

<script lang="ts" setup>
import { LMessage } from "lotus-plus";

const open1 = () => {
  LMessage({
    message: "This is a message.",
    type: "info",
    icon: "edit"
  });
};
const open2 = () => {
  LMessage({
    message: "Loading...",
    type: "loading",
    icon: "star"
  });
};
</script>
<template>
  <div>
    <l-button @click="open1">Info</l-button>
    <l-button @click="open2">Loading</l-button>
  </div>
</template>

可关闭

通过 showClose 属性可以让提示可关闭。

<script lang="ts" setup>
import { LMessage } from "lotus-plus";

const open = () => {
  LMessage({ message: "Congrats, this is a success message.", showClose: true });
};
</script>
<template>
  <div>
    <l-button @click="open">Show message</l-button>
  </div>
</template>

关闭所有消息

通过 closeAll 方法可以关闭所有消息。

<script lang="ts" setup>
import { LMessage } from "lotus-plus";

const open = () => {
  LMessage({ message: "Congrats, this is a success message.", showClose: true });
  LMessage({ message: "Congrats, this is a success message.", showClose: true });
  LMessage({ message: "Congrats, this is a success message.", showClose: true });
};
</script>
<template>
  <div>
    <l-button @click="open">点击打开多条消息</l-button>
    <l-button @click="LMessage.closeAll()">点击关闭所有消息</l-button>
  </div>
</template>

更新内容

更新消息内容。

<script lang="ts" setup>
import { LMessage } from "lotus-plus";

const open = () => {
  LMessage({
    id: "loading",
    message: "Loading...",
    type: "loading"
  });
  setTimeout(() => {
    LMessage({
      id: "loading",
      message: "loaded",
      type: "success"
    });
  }, 2000);
};
</script>
<template>
  <div>
    <l-button @click="open">Open Message</l-button>
  </div>
</template>

调用方式

Lotus Plus 为 app.config.globalProperties 添加了全局方法 $message , 可以通过 $message 调用。同时也提供了 $message.info 、$message.success 、$message.warning 、$message.error 、$message.loading 等方法。

<script lang="ts" setup>
import { LMessage } from "lotus-plus";
const open1 = () => {
  LMessage({ message: "Congrats, this is a success message.", type: "success" });
};
const open2 = () => {
  LMessage.success("Congrats, this is a success message.");
};
</script>
<template>
  <div>
    <l-button @click="open1">插件式调用</l-button>
    <l-button @click="open2">函数式调用</l-button>
    <l-button @click="() => $message.success('Congrats, this is a success message.')"
      >全局方法调用</l-button
    >
  </div>
</template>

Message API

Config

参数名	描述	类型	默认值
id	唯一 id	string	-
message	内容	string | VNode | (() => VNode)	-
type	消息类型	info | success | warning | error | loading	info
icon	自定义图标	string | Component	-
showClose	是否显示关闭按钮	boolean	false
duration	显示时长, 单位毫秒	number	3000
onClose	关闭时触发的回调函数	() => void	-
onDestroy	销毁时触发的回调函数	() => void	-

Methods

事件名	描述	类型
info	显示信息提示	(config: MessageParams) => MessageHandler
success	显示成功提示	(config: MessageParams) => MessageHandler
warning	显示警告提示	(config: MessageParams) => MessageHandler
error	显示错误提示	(config: MessageParams) => MessageHandler
loading	显示加载提示	(config: MessageParams) => MessageHandler
closeAll	关闭所有消息(可筛选类型)	(type?: MessageType) => void

Slots

插槽名	描述
default	自定义内容