Notification 通知

基本用法

支持函数式调用和全局调用

<script setup lang="ts">
import { LNotification } from "lotus-plus";
const open1 = () => {
  LNotification({ title: "Notification", content: "This is a notification!" });
};
const open2 = () => {
  LNotification.info({ title: "Notification", content: "This is a notification!" });
};
</script>

<template>
  <div>
    <l-button @click="open1">Open Notification</l-button>
    <l-button @click="open2">Open Notification</l-button>
    <l-button @click="$notify({ title: 'Notification', content: 'This is a notification!' })"
      >Open Notification</l-button
    >
  </div>
</template>

不同类型的通知

我们提供了四种不同类型的提示框: info, success, warning 和 error。

他们可以通过设置 type 字段来指定类型(默认为 info ), 除此之外, 也可以在不传入 type 字段的情况下像 open3 、open4 那样直接调用。

<script setup lang="ts">
import { LNotification } from "lotus-plus";
const open1 = () => {
  LNotification({ title: "Notification", content: "This is a notification!" });
};
const open2 = () => {
  LNotification({ title: "Notification", content: "This is a notification!", type: "success" });
};
const open3 = () => {
  LNotification.warning({ title: "Notification", content: "This is a notification!" });
};
const open4 = () => {
  LNotification.error({ title: "Notification", content: "This is a notification!" });
};
</script>

<template>
  <div>
    <l-button @click="open1">Info</l-button>
    <l-button @click="open2" status="success">Success</l-button>
    <l-button @click="open3" status="warning">Warning</l-button>
    <l-button @click="open4" status="danger">Error</l-button>
  </div>
</template>

自定义消息弹出的位置

可以通过设置 position 字段来指定消息弹出的位置(默认为 top-right ), 目前支持 top-right、top-left、bottom-right、bottom-left 四个位置。

<script setup lang="ts">
import { LNotification } from "lotus-plus";
const open1 = () => {
  LNotification({
    title: "Notification",
    content: "This is a notification!",
    position: "top-right"
  });
};
const open2 = () => {
  LNotification({
    title: "Notification",
    content: "This is a notification!",
    position: "top-left"
  });
};
const open3 = () => {
  LNotification({
    title: "Notification",
    content: "This is a notification!",
    position: "bottom-right"
  });
};
const open4 = () => {
  LNotification({
    title: "Notification",
    content: "This is a notification!",
    position: "bottom-left"
  });
};
</script>

<template>
  <div>
    <l-button @click="open1">top-right</l-button>
    <l-button @click="open2">top-left</l-button>
    <l-button @click="open3">bottom-right</l-button>
    <l-button @click="open4">bottom-left</l-button>
  </div>
</template>

VNode

title 和 message 支持 VNode，可以传入组件、HTML 标签、文本等。

<script setup lang="ts">
import { h } from "vue";
import { LNotification } from "lotus-plus";
const open = () => {
  LNotification({
    title: h("p", { style: "font-size: 16px" }, [
      h("span", null, "Title can be "),
      h("i", { style: "color: teal" }, "VNode")
    ]),
    content: h("p", { style: "line-height: 1; font-size: 14px" }, [
      h("span", null, "Content can be "),
      h("i", { style: "color: teal" }, "VNode")
    ]),
    duration: 0
  });
};
</script>

<template>
  <div>
    <l-button @click="open">Open Notification</l-button>
  </div>
</template>

通知的关闭

可以设置 duration 字段来指定通知的持续时间(单位为毫秒)，默认为 3000 毫秒, 若设置为 0 则不会自动关闭。

可以通过设置 showClose 字段来指定是否显示关闭按钮。

可以通过 closeAll() 来关闭所有通知, 也可以通过 closeAll(type) 来关闭指定类型的通知。

<script setup lang="ts">
import { LNotification } from "lotus-plus";
const open1 = () => {
  LNotification({
    title: "Notification",
    content: "This is a message with close button",
    showClose: true
  });
};
const open2 = () => {
  LNotification.success({
    title: "Notification",
    content: "This is a message that does not automatically close",
    showClose: true,
    duration: 0
  });
  LNotification.error({
    title: "Notification",
    content: "This is a message that does not automatically close",
    showClose: true,
    duration: 0
  });
};
</script>

<template>
  <div>
    <l-button @click="open1">Show Close</l-button>
    <l-button @click="open2"> Won't close automatically </l-button>
    <l-button @click="LNotification.closeAll()"> close all </l-button>
    <l-button @click="LNotification.closeAll('error')"> close all error </l-button>
  </div>
</template>

通知的更新

通过设置 id 字段来标识通知，当相同 id 的通知发生变化时，会重新渲染通知。

<script setup lang="ts">
import { LNotification } from "lotus-plus";
const open = () => {
  LNotification({
    id: "loading",
    title: "Notification",
    content: "loading",
    showClose: true,
    duration: 0
  });
  setTimeout(() => {
    LNotification.success({
      id: "loading",
      title: "Notification",
      content: "loaded",
      showClose: true,
      duration: 1000
    });
  }, 3000);
};
</script>

<template>
  <div>
    <l-button @click="open">Update</l-button>
  </div>
</template>

Notification API

Config

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

Methods

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

Slots

插槽名	描述
default	自定义内容