[comp:notification] 通知消息提醒

[typistZxd]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

• Api更新为最新

Notification 通知提醒框

全局展示通知提醒信息。

API

IxNotification

NotificationProps

名称	说明	类型	默认值	全局配置	备注
v-model:visible	是否可见	boolean	-	-	-
destroyOnHover	鼠标悬浮时是否允许销毁	boolean	false	√	-
duration	自动销毁的延时，单位毫秒	number	4500	√	-
icon	自定义通知图标	string | VNode	-	√	-
closeIcon	自定义关闭图标	string | VNode	-	-	-
type	通知类型	'info' | 'success' | 'warning' | 'error'	info	-	-
key	唯一标识	string | number | symbol	-	-	-
offset	通知消息弹出时，距离边缘的位置	number | string	24	√	number时，单位为px；string时可为`vh
placement	弹出的位置，可选 topLeft | topRight | bottomLeft | bottomRight	string	topRight	√	-
title	通知的标题	string | VNode	-	-	必填
content	通知的内容	string | VNode	-	-	必填
footer	自定义底部按钮	string | VNode | ButtonProps[]	-	-	底部区域flex布局
onClose	关闭通知时触发的回调	() => void	-	-	-

IxNotificationProvider

如果你想通过 useNotification 来创建通知，则你需要把组件包裹在 IxNotificationProvider 内部，因为这样才不会丢失应用的上下文信息。

NotificationProviderProps

全局的通知提醒配置，继承于NotificationProps

名称	说明	类型	默认值	全局配置	备注
maxCount	同一时间可展示的最大提示数量	number	5	√	-

useNotification

可以使用 useNotification 来快速创建和管理通知提醒信息。

export const useNotification: () => NotificationProviderRef;

export interface NotificationProviderRef {
  // 打开通知提醒
  open: (options: NotificationProps) => NotificationRef
  info: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  success: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  warning: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  error: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  // 更新指定 key 的通知的配置
  update: (key: VKey, options: Omit<NotificationProps, 'key'>) => void
  // 销毁指定 key 的通知信息
  destroy: (key: VKey | VKey[]) => void
  // 销毁所有通知信息
  destroyAll: () => void
}

export interface NotificationRef {
  // 通知提醒的唯一标识
  key: VKey
  // 更新当前配置信息
  update: (options: Partial<NotificationOptions>) => void
  // 销毁当前通知提醒
  destroy: () => void
}

NotificationSlot

名称	说明	参数类型	备注
title	通知的标题	-	优先级高于title配置
default	通知的内容	-	优先级高于content配置
footer	自定义底部按钮	-	优先级高于footer配置

[typistZxd]

offset区分verticalOffset （上下边缘距离）和horizontalOffset（左右边缘距离）

[typistZxd]

单独使用IxNotification组件，不存在offset、placement配置

[danranVm]

offset区分verticalOffset （上下边缘距离）和horizontalOffset（左右边缘距离）

offset 支持一下数组格式？

[danranVm]

单独使用IxNotification组件，不存在offset、placement配置

为什么？

[typistZxd]

offset区分verticalOffset （上下边缘距离）和horizontalOffset（左右边缘距离）

offset 支持一下数组格式？

可以

名称	说明	类型	默认值	全局配置	备注
offset	通知消息弹出时，距离边缘的位置	number | string|[number | string, number | string]	24	☑️	number时：单位为px； string时：可为vh或者%； array时：[上下边缘，左右边缘]，设置为非array时上下边缘和左右边缘相等

[typistZxd]

单独使用IxNotification组件，不存在offset、placement配置

为什么？

保留这两个配置，但是在单独使用template时无效，建议采用useNotification。

单独使用notification组件的场景比较少，若单独使用，则需要每个组件都单独计算位置，还要避免和采用useNotification的弹窗出现位置冲突，更优的方式应该是统一对notification容器做定位。

如果是出于需要特殊场景样式覆盖，提供一个cls配置类名，由业务用此类名覆盖样式

[typistZxd]

placement修改如下：

名称	说明	类型	默认值	全局配置	备注
placement	弹出的位置	'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd'	'topEnd'	☑️	-

[typistZxd]

notification中onClose和onDestroy重复

[typistZxd]

最新API

globalConfig

全局的通知提醒配置

名称	说明	类型	默认值	备注
maxCount	同一时间可展示的最大提示数量	number	5	-
destroyOnHover	鼠标悬浮时是否允许销毁	boolean	false	-
duration	自动销毁的延时，单位毫秒	number	4500	-
icon	自定义通知图标映射表	Partial<Record<NotificationType, string | VNode>>	{ success: 'check-circle', error: 'close-circle', info: 'info-circle', warning: 'exclamation-circle' }	-
closeIcon	自定义关闭图标	string | VNode	'close'	-
offset	通知消息弹出时，距离边缘的位置	number | string |[number | string, number | string]	24	number时：单位为px； string时：可为vh \ vw | % | px； array时：[上下边缘，左右边缘]； 设置为非array时上下边缘和左右边缘相等
placement	弹出的位置	'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd'	'topEnd'	-

IxNotificationProvider

通过 useNotification 来创建通知，需要把组件包裹在 IxNotificationProvider 内部，因为这样才不会丢失应用的上下文信息。

NotificationProviderProps

名称	说明	类型	默认值	全局配置	备注
maxCount	同一时间可展示的最大提示数量	number	5	☑️	-
offset	通知消息弹出时，距离边缘的位置	number | string |[number | string, number | string]	24	☑️	number时：单位为px； string时：可为vh或者%； array时：[上下边缘，左右边缘]； 设置为非array时上下边缘和左右边缘相等

<!-- App.vue -->
<IxNotificationProvider>
  <MyComponent />
</IxNotificationProvider>

<!-- MyComponent.vue -->
<template>
  <IxButton @click="openNotification">Open</IxButton>
</template>

<script setup lang="ts">
import { useNotification } from '@idux/components/notification'

const notification = useNotification()
const openNotification = ()=> notification.info({
  title: 'info',
  content: 'this is a notification'
})
</script>

useNotification

可以使用 useNotification 来快速创建和管理通知提醒信息。

NotificationOption

名称	说明	类型	默认值	全局配置	备注
destroyOnHover	鼠标悬浮时是否允许销毁	boolean	false	☑️	-
duration	自动销毁的延时，单位毫秒	number	4500	☑️	-
icon	自定义通知图标	string | VNode	-	-	-
closeIcon	自定义关闭图标	string | VNode	-	-	-
type	通知类型	'info' | 'success' | 'warning' | 'error'	-	-	-
key	唯一标识	string | number | symbol	-	-	-
placement	弹出的位置	'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd'	'topEnd'	☑️	-
title	通知的标题	string | VNode	-	-	必填
content	通知的内容	string | VNode	-	-	必填
footer	自定义底部按钮	string | VNode | ButtonProps[]	-	-	底部区域flex布局
onDestroy	关闭通知时触发的回调	(key: VKey) => void	-	-	-

export const useNotification: () => NotificationProviderRef;

export interface NotificationProviderRef {
  // 打开通知提醒
  open: (options: NotificationProps) => NotificationRef
  info: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  success: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  warning: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  error: (options: Omit<NotificationProps, 'type'>) => NotificationRef
  // 更新指定 key 的通知的配置
  update: (key: VKey, options: Omit<NotificationProps, 'key'>) => void
  // 销毁指定 key 的通知信息
  destroy: (key: VKey | VKey[]) => void
  // 销毁所有通知信息
  destroyAll: () => void
}

export interface NotificationRef {
  // 通知提醒的唯一标识
  key: VKey
  // 更新当前配置信息
  update: (options: Partial<NotificationOptions>) => void
  // 销毁当前通知提醒
  destroy: () => void
}