Notification 通知

悬浮出现在页面角落，显示全局的通知提醒消息。

?

名称	分类	说明	类型	默认值
type	? 风格	通知类型	'success' | 'warning' | 'info' | 'danger' | 'error'	—
position	? 风格	弹出位置	'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'	'top-right'
offset	? 风格	距离窗口边缘的偏移量	number	20
plain	? 风格	朴素模式（浅色背景，彩色文字）	boolean	false
ghost	? 风格	幽灵模式（透明背景，仅边框）	boolean	false
duration	? 行为	显示时间（毫秒），设为 0 则不会自动关闭	number	3000
showClose	? 行为	是否显示关闭按钮	boolean	true
showTimer	? 行为	是否显示计时进度条	boolean	true
max	? 行为	同一位置最大可见数量	number	—
onClick	? 行为	点击回调	() => void	—
onClose	? 行为	关闭回调	() => void	—
title	? 内容	标题	string	—
message	? 内容	通知内容	string | VNode	—
icon	? 内容	自定义图标	string	—
PxNotification	? 方法	显示通知	(options: NotificationOptions) => NotificationHandler	—
PxNotification.success	? 方法	显示成功通知	(options: NotificationOptions) => NotificationHandler	—
PxNotification.warning	? 方法	显示警告通知	(options: NotificationOptions) => NotificationHandler	—
PxNotification.info	? 方法	显示信息通知	(options: NotificationOptions) => NotificationHandler	—
PxNotification.danger	? 方法	显示危险通知	(options: NotificationOptions) => NotificationHandler	—
PxNotification.error	? 方法	显示错误通知	(options: NotificationOptions) => NotificationHandler	—
PxNotification.closeAll	? 方法	关闭所有通知	(type?: NotificationType) => void	—

基础用法

<template>
  <px-button @click="showNotification">Show Notification</px-button>
</template>

<script setup lang="ts">
import { PxNotification } from 'sakana-element';

const showNotification = () => {
  PxNotification({
    title: 'Title',
    message: 'This is a notification message',
  });
};
</script>

不同类型

用来显示「成功、警告、消息、错误」类的通知。

<template>
  <div class="demo-notification">
    <px-button @click="showSuccess">Success</px-button>
    <px-button @click="showWarning">Warning</px-button>
    <px-button @click="showInfo">Info</px-button>
    <px-button @click="showDanger">Danger</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxNotification } from 'sakana-element';

const showSuccess = () => {
  PxNotification.success({
    title: 'Success',
    message: 'Operation completed successfully',
  });
};
const showWarning = () => {
  PxNotification.warning({
    title: 'Warning',
    message: 'This is a warning message',
  });
};
const showInfo = () => {
  PxNotification.info({
    title: 'Info',
    message: 'This is an info message',
  });
};
const showDanger = () => {
  PxNotification.danger({
    title: 'Danger',
    message: 'This is a danger message',
  });
};
</script>

<style scoped>
.demo-notification {
  display: flex;
  gap: 12px;
}
</style>

朴素模式

使用 plain 获取浅色背景、彩色文字的样式。

<template>
  <div class="demo-notification">
    <px-button v-for="t in types" :key="t" :type="t === 'danger' ? 'danger' : t" @click="show(t)">
      {{ t }}
    </px-button>
  </div>
</template>

<script setup lang="ts">
import { PxNotification } from 'sakana-element';

const types = ['info', 'success', 'warning', 'danger'] as const;

const show = (type: (typeof types)[number]) => {
  PxNotification({
    title: 'Plain Notification',
    message: `This is a ${type} plain notification.`,
    type,
    plain: true,
  });
};
</script>

<style scoped>
.demo-notification {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>

幽灵模式

使用 ghost 获取透明背景、仅边框的样式。

<template>
  <div class="demo-notification">
    <px-button v-for="t in types" :key="t" :type="t === 'danger' ? 'danger' : t" @click="show(t)">
      {{ t }}
    </px-button>
  </div>
</template>

<script setup lang="ts">
import { PxNotification } from 'sakana-element';

const types = ['info', 'success', 'warning', 'danger'] as const;

const show = (type: (typeof types)[number]) => {
  PxNotification({
    title: 'Ghost Notification',
    message: `This is a ${type} ghost notification.`,
    type,
    ghost: true,
  });
};
</script>

<style scoped>
.demo-notification {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>

不同位置

可以让通知从屏幕四角中的任意一角弹出。

<template>
  <div class="demo-notification">
    <px-button @click="showTopRight">Top Right</px-button>
    <px-button @click="showTopLeft">Top Left</px-button>
    <px-button @click="showBottomRight">Bottom Right</px-button>
    <px-button @click="showBottomLeft">Bottom Left</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxNotification } from 'sakana-element';

const showTopRight = () => {
  PxNotification({
    title: 'Top Right',
    message: 'This is a notification',
    position: 'top-right',
  });
};
const showTopLeft = () => {
  PxNotification({
    title: 'Top Left',
    message: 'This is a notification',
    position: 'top-left',
  });
};
const showBottomRight = () => {
  PxNotification({
    title: 'Bottom Right',
    message: 'This is a notification',
    position: 'bottom-right',
  });
};
const showBottomLeft = () => {
  PxNotification({
    title: 'Bottom Left',
    message: 'This is a notification',
    position: 'bottom-left',
  });
};
</script>

<style scoped>
.demo-notification {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>

自定义时长

设置 duration 为 0 时通知不会自动关闭。

<template>
  <px-button @click="showNotification">Non-auto close</px-button>
</template>

<script setup lang="ts">
import { PxNotification } from 'sakana-element';

const showNotification = () => {
  PxNotification({
    title: 'Notice',
    message: 'This notification will not auto close',
    duration: 0,
  });
};
</script>

计时进度条

底部的细进度条显示剩余时间，通过 showTimer（默认 true）控制。

<template>
  <div class="demo-notification">
    <px-button @click="showTimer">With Timer Bar (default)</px-button>
    <px-button @click="showNoTimer">Without Timer Bar</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxNotification } from 'sakana-element';

const showTimer = () => {
  PxNotification({
    title: 'Timer Bar',
    message: 'Watch the progress bar at the bottom.',
    type: 'info',
    duration: 5000,
  });
};

const showNoTimer = () => {
  PxNotification({
    title: 'No Timer Bar',
    message: 'Timer bar is hidden.',
    type: 'info',
    duration: 5000,
    showTimer: false,
  });
};
</script>

<style scoped>
.demo-notification {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>

最大显示数量

设置 max 限制同一位置的最大可见通知数量，超出时自动关闭最早的通知。

<template>
  <div class="demo-notification">
    <px-button @click="showNotification">Show Notification (max 3)</px-button>
  </div>
</template>

<script setup lang="ts">
import { PxNotification } from 'sakana-element';

let count = 0;
const showNotification = () => {
  count++;
  PxNotification({
    title: `Notification #${count}`,
    message: 'Only 3 notifications are visible at once.',
    duration: 5000,
    max: 3,
  });
};
</script>

<style scoped>
.demo-notification {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style>