useWebNotification

类别

Browser

导出大小

1.22 kB

最近修改

2 days ago

响应式 通知

🌐 Reactive Notification

通知 API 的 Web 通知接口用于配置并向用户显示桌面通知。

🌐 The Web Notification interface of the Notifications API is used to configure and display desktop notifications to the user.

示例

源代码在线运行

Supported: false

The Notification Web API is not supported in your browser.

用法

🌐 Usage

TIP

在应用发送通知之前，用户必须授予应用发送通知的权限。用户的操作系统设置也可能会阻止预期的通知行为。

import { useWebNotification } from '@vueuse/core'

const {
  isSupported,
  notification,
  permissionGranted,
  show,
  close,
  onClick,
  onShow,
  onError,
  onClose,
} = useWebNotification({
  title: 'Hello, VueUse world!',
  dir: 'auto',
  lang: 'en',
  renotify: true,
  tag: 'test',
})

if (isSupported.value && permissionGranted.value)
  show()

此可组合项还利用“@vueuse/shared”中的 createEventHook 工具：

🌐 This composable also utilizes the createEventHook utility from '@vueuse/shared`:

TypeScript

onClick((evt: Event) => {
  // Do something with the notification on:click event...
})

onShow((evt: Event) => {
  // Do something with the notification on:show event...
})

onError((evt: Event) => {
  // Do something with the notification on:error event...
})

onClose((evt: Event) => {
  // Do something with the notification on:close event...
})

onClick((evt) => {
  // Do something with the notification on:click event...
})
onShow((evt) => {
  // Do something with the notification on:show event...
})
onError((evt) => {
  // Do something with the notification on:error event...
})
onClose((evt) => {
  // Do something with the notification on:close event...
})