通知提醒框 Notification

通知提醒框的基本用法。

通过指定 btn 字段，可以添加操作按钮。

需要设置 closable: true，自定义元素使用 closeIconElement，仅图标使用 closeIcon (会有 hover 样式)。

通知提醒框有 4 种不同的弹出位置，分别为：左上角, 右上角 (默认), 左下角, 右下角。

可以设置 style 和 class 来定制样式。

通知提醒框的消息类型。

通过指定参数 id，可以更新已经存在的通知提醒框。

通过指定参数 id，可以更新已经存在的通知提醒框。

API

Notification 提供的全局方法，可以通过以下三种方法使用：

通过 this.$notification 调用
在 Composition API 中，通过 getCurrentInstance().appContext.config.globalProperties.$notification 调用
导入 Notification，通过 Notification 本身调用

当通过 import 方式使用时，组件没有办法获取当前的 Vue Context，如 i18n 或 route 等注入在 AppContext 上的内容无法在内部使用，需要在调用时手动传入 AppContext，或者为组件全局指定 AppContext

import { createApp } from 'vue';
import { Notification } from '@sdata/web-vue';

const app = createApp(App);
Notification._context = app._context;

参数名	描述	类型	默认值
info	显示信息提醒框	`( config: string \| NotificationConfig, appContext?: AppContext ) => NotificationReturn`	`-`
success	显示成功提醒框	`( config: string \| NotificationConfig, appContext?: AppContext ) => NotificationReturn`	`-`
warning	显示警告提醒框	`( config: string \| NotificationConfig, appContext?: AppContext ) => NotificationReturn`	`-`
error	显示错误提醒框	`( config: string \| NotificationConfig, appContext?: AppContext ) => NotificationReturn`	`-`
remove	清除对应 `id` 的提醒框	`(id: string) => void`	`-`
clear	清除全部提醒框	`(position?: NotificationPosition) => void`	`-`

参数名	描述	类型	默认值	版本
content	内容	`RenderContent`	`-`
title	标题	`RenderContent`	`-`
icon	图标	`RenderFunction`	`-`
id	唯一id	`string`	`-`
style	样式	`CSSProperties`	`-`
class	样式类名	`ClassName`	`-`
position	位置	`'topLeft'\|'topRight'\|'bottomLeft'\|'bottomRight'`	`-`
showIcon	是否显示图标	`boolean`	`true`
closable	是否可关闭	`boolean`	`false`
duration	显示的持续时间，单位为 `ms`	`number`	`3000`
footer	底部内容	`RenderFunction`	`-`	2.25.0
closeIcon	关闭按钮图标	`RenderFunction`	`-`
closeIconElement	关闭按钮元素	`RenderFunction`	`-`
onClose	关闭时的回调函数	`(id: number \| string) => void`	`-`

参数名	描述	类型	默认值
close	关闭当前通知提醒框	`() => void`	`-`