X-Next

Appearance

Notification 通知提醒 ​

用于在页面角落展示较完整的通知内容，通常由命令式方法触发。

基础用法 ​

vue
<template>
  <x-space>
    <x-button type="primary" @click="showBasicNotification">显示通知</x-button>
    <x-button @click="showCloseableNotification">常驻通知</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { Notification } from 'x-next';

const showBasicNotification = () => {
  Notification.success({
    title: '处理完成',
    message: '后台任务已成功处理',
  });
};

const showCloseableNotification = () => {
  Notification.info({
    title: '常驻通知',
    message: 'duration=0 时不会自动关闭',
    duration: 0,
    showClose: true,
  });
};
</script>

通知类型 ​

vue
<template>
  <x-space wrap>
    <x-button @click="showTypedNotification('info')">Info</x-button>
    <x-button status="success" @click="showTypedNotification('success')">Success</x-button>
    <x-button status="warning" @click="showTypedNotification('warning')">Warning</x-button>
    <x-button status="strong" @click="showTypedNotification('strong')">Strong</x-button>
    <x-button status="danger" @click="showTypedNotification('error')">Error</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { Notification } from 'x-next';
import type { NotificationType } from 'x-next';

const showTypedNotification = (type: NotificationType) => {
  Notification[type]({
    title: `${type} 通知`,
    message: '不同类型会使用不同的状态图标和强调色',
  });
};
</script>

位置 ​

vue
<template>
  <x-space wrap>
    <x-button @click="showPositionNotification('top-right')">右上角</x-button>
    <x-button @click="showPositionNotification('top-left')">左上角</x-button>
    <x-button @click="showPositionNotification('bottom-right')">右下角</x-button>
    <x-button @click="showPositionNotification('bottom-left')">左下角</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { Notification } from 'x-next';
import type { NotificationPosition } from 'x-next';

const showPositionNotification = (position: NotificationPosition) => {
  Notification.info({
    title: position,
    message: '通知会从对应角落弹出',
    position,
  });
};
</script>

手动关闭和清空 ​

vue
<template>
  <x-space>
    <x-button type="primary" @click="showManualCloseNotification">2 秒后关闭</x-button>
    <x-button @click="clearNotifications">清空通知</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { Notification } from 'x-next';

const showManualCloseNotification = () => {
  const handler = Notification.warning({
    title: '手动关闭',
    message: '这条通知会在 2 秒后关闭',
    duration: 0,
  });
  window.setTimeout(() => handler.close(), 2000);
};

const clearNotifications = () => Notification.clear();
</script>

更新通知 ​

vue
<template>
  <x-space>
    <x-button @click="showUpdatedNotification">更新同一条</x-button>
    <x-button @click="removeUpdatedNotification">移除指定通知</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Notification } from 'x-next';

const progress = ref(1);

const showUpdatedNotification = () => {
  Notification.info({
    id: 'notification-update-demo',
    title: '任务进度',
    message: `当前进度 ${progress.value++}`,
    duration: 3000,
  });
};

const removeUpdatedNotification = () => {
  Notification.remove('notification-update-demo');
};
</script>

自定义内容 ​

vue
<template>
  <x-space>
    <x-button @click="showCustomIconNotification">自定义图标</x-button>
    <x-button @click="showFooterNotification">底部操作</x-button>
  </x-space>
</template>

<script setup lang="ts">
import { h } from 'vue';
import { Notification } from 'x-next';

const showCustomIconNotification = () => {
  Notification.info({
    title: '自定义图标',
    message: '可以传入 icon 渲染函数',
    icon: () => h('span', { class: 'notification-custom-icon' }, '★'),
  });
};

const showFooterNotification = () => {
  const handler = Notification.warning({
    title: '需要处理',
    message: '通知底部可以承载业务操作',
    duration: 0,
    footer: () =>
      h('div', { style: 'display:flex;gap:8px;justify-content:flex-end;' }, [
        h('button', { onClick: () => handler.close() }, '稍后'),
        h('button', { onClick: () => handler.close() }, '处理'),
      ]),
  });
};
</script>

局部容器 ​

vue
<template>
  <x-button @click="showLocalNotification">显示到局部容器</x-button>
  <div id="notification-local-container" class="notification-local-container"></div>
</template>

<script setup lang="ts">
import { Notification } from 'x-next';

const showLocalNotification = () => {
  Notification.success({
    title: '局部通知',
    message: '通知挂载到指定容器内',
    renderTo: '#notification-local-container',
    position: 'top-right',
    duration: 4000,
  });
};
</script>

按需导入 ​

ts
import { Notification } from 'x-next';

Methods ​

方法说明参数返回值
Notification(options)显示一条通知NotificationOptions | NotificationContent{ close: () => void }
Notification.info(options)信息通知NotificationOptions | NotificationContent{ close: () => void }
Notification.success(options)成功通知NotificationOptions | NotificationContent{ close: () => void }
Notification.warning(options)警告通知NotificationOptions | NotificationContent{ close: () => void }
Notification.strong(options)强调通知NotificationOptions | NotificationContent{ close: () => void }
Notification.error(options)错误通知NotificationOptions | NotificationContent{ close: () => void }
Notification.remove(id)移除指定通知string | numbervoid
Notification.clear(position?)清空通知NotificationPositionvoid

NotificationOptions ​

参数说明类型默认值
id通知唯一标识，相同 id 会更新已有通知string | number-
title通知标题NotificationContent-
message通知内容NotificationContent-
contentmessage 的别名NotificationContent-
type通知类型'success' | 'strong' | 'warning' | 'error' | 'info''info'
duration自动关闭时间，单位毫秒，0 表示不自动关闭number3000
position通知弹出位置'top-right' | 'top-left' | 'bottom-right' | 'bottom-left''top-right'
offset与容器边缘的初始偏移number20
renderTo挂载容器，找不到时回退到 bodystring | HTMLElement'body'
showClose是否显示关闭按钮booleantrue
closableshowClose 的别名booleantrue
showIcon是否显示图标booleantrue
icon自定义图标RenderFunction | VNode-
footer自定义底部RenderFunction | VNode-
closeIcon自定义关闭图标RenderFunction | VNode-
popupClass自定义类名string-
class自定义类名string-
style自定义样式CSSProperties-
onClick点击通知回调() => void-
onClose关闭回调(id?: string | number) => void-

Types ​

ts
type NotificationContent = string | number | VNode | RenderFunction;
type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';