Notification 通知

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

基础用法

注册了一个 createNotification 方法用于调用。 你可以通过设置 title 和 message 属性来设置通知的标题和正文内容。默认情况下，通知在 3000 毫秒后自动关闭，但你可以通过设置 duration 属性来自定义通知的展示时间。 如果你将它设置为 0，那么通知将不会自动关闭。 需要注意的是 duration 接收一个 Number，单位为毫秒。

<script setup>
import { h } from 'vue'
import { createNotification } from '@/components/Notification/method'
import Button from '@/components/Button/Button.vue'
const open = () => {
  createNotification({ title:'this is the title', message: 'hello world' })
}
const open2 = () => {
  createNotification({ title:'this is the title', message: h('b', 'this is bold') })
}
</script>
<template>
<div class="basic block">
  <Button type="primary" @click="open"> 创建一条通知 </Button>
  <Button  @click="open2"> 创建支持 VNode 的通知 </Button>
</div>
</template>

不同类型的通知

用来显示「成功、警告、消息、错误」类的操作反馈。设置 type 字段可以定义不同的状态，默认为info。

<script setup>
import { createNotification } from '@/components/Notification/method'
import Button from '@/components/Button/Button.vue'
const open = (type) => {
  createNotification({ title:'this is the title', message: 'hello world', type })
}
</script>
<template>
<div class="basic block">
  <Button @click="open('success')"> Success </Button>
  <Button @click="open('info')"> Info </Button>
  <Button @click="open('warning')"> warning </Button>
  <Button @click="open('danger')"> Danger </Button>
</div>
</template>

自定义图标类型

可以使用 iconName 属性来自定义通知左侧图标。图标名称请看 fontawesome 官网 https://fontawesome.com/icons

<script setup>
import { createNotification } from '@/components/Notification/method'
import Button from '@/components/Button/Button.vue'
const open = () => {
  createNotification({ title:'this is the title', message: 'hello world', icon: 'star' })
}

</script>
<template>
<div class="basic block">
  <Button type="primary" @click="open"> 创建一条带图标的通知 </Button>
</div>
</template>

React 用法

import { createNotification, closeAllNotifications } from '@bobocn/element/react'
import '@bobocn/element/style.css'

// 基础用法
function App() {
  return (
    <div>
      <button onClick={() => createNotification({ title: '通知', message: '这是一条通知' })}>
        基础通知
      </button>
      <button onClick={() => createNotification({ title: '成功', message: '操作成功', type: 'success' })}>
        成功
      </button>
      <button onClick={() => createNotification({ title: '警告', message: '请注意', type: 'warning' })}>
        警告
      </button>
    </div>
  )
}

// 自定义图标
createNotification({ title: '通知', message: '自定义图标', icon: 'bell' })

// 不自动关闭
createNotification({ title: '通知', message: '手动关闭', duration: 0 })

// 关闭所有
closeAllNotifications()

API

Notification 配置项

使用 createNotification 创建通知，它接受一个Object，以下是 Object 中的属性列表。

属性名	说明	类型	默认值
title	通知标题	string	—
message	通知文字	string | VNode	—
type	通知类型	'success' | 'warning' | 'info' | 'danger'	info
showClose	是否显示关闭按钮	boolean	false
duration	显示时间（毫秒），设为 0 则不会自动关闭	number	3000
icon	左侧自定义图标名称	string	—
offset	距离窗口顶部的偏移量（像素）	number	0

Notification 方法

调用 createNotification 会返回当前 Notification 的实例。 如果需要手动关闭实例，可以调用它的 close 方法。

方法名	说明	类型
close	关闭当前 Notification	() => void

插槽 (Slots)

插槽名	说明
default	自定义通知正文内容
title	自定义通知标题内容