useWebNotification
响应式 Notification
Web Notification 接口用于配置和显示桌面通知给用户。
示例
用法
TIP
Before an app can send a notification, the user must grant the application the right to do so. The user's OS settings may also prevent expected notification behaviour.
ts
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 工具：
ts
onClick((evt: Event) => {
// 处理通知的点击事件...
})
onShow((evt: Event) => {
// 处理通知的显示事件...
})
onError((evt: Event) => {
// 处理通知的错误事件...
})
onClose((evt: Event) => {
// 处理通知的关闭事件...
})js
onClick((evt) => {
// 处理通知的点击事件...
})
onShow((evt) => {
// 处理通知的显示事件...
})
onError((evt) => {
// 处理通知的错误事件...
})
onClose((evt) => {
// 处理通知的关闭事件...
})类型声明
显示类型声明
ts
export interface WebNotificationOptions {
/**
* Notification 的标题，只读属性，指示通知的标题。
*
* @default ''
*/
title?: string
/**
* Notification 的正文字符串，指定在构造函数的 options 参数中。
*
* @default ''
*/
body?: string
/**
* Notification 的文本方向，指定在构造函数的 options 参数中。
*
* @default ''
*/
dir?: "auto" | "ltr" | "rtl"
/**
* Notification 的语言代码，指定在构造函数的 options 参数中。
*
* @default DOMString
*/
lang?: string
/**
* Notification 的 ID（如果有），指定在构造函数的 options 参数中。
*
* @default ''
*/
tag?: string
/**
* 作为通知图标使用的图像的 URL，指定在构造函数的 options 参数中。
*
* @default ''
*/
icon?: string
/**
* 指定是否在新通知替换旧通知后应通知用户。
*
* @default false
*/
renotify?: boolean
/**
* 一个布尔值，指示通知是否应该保持活动状态，直到用户点击或解除通知，而不是自动关闭。
*
* @default false
*/
requireInteraction?: boolean
/**
* Notification 的 silent 只读属性指定通知是否应该是静音的，即，无论设备设置如何，都不应发出声音或振动。
*
* @default false
*/
silent?: boolean
/**
* 为具有振动硬件的设备指定振动模式以发出的震动模式。
* 一个振动模式，如 Vibration API 规范中所指定的那样。
*
* @see https://w3c.github.io/vibration/
*/
vibrate?: number[]
}
export interface UseWebNotificationOptions
extends ConfigurableWindow,
WebNotificationOptions {
/**
* 如果权限未授予，则在 onMounted 时请求权限。
*
* 可以禁用，并在之后调用 `ensurePermissions` 以授予权限。
*
* @default true
*/
requestPermissions?: boolean
}
/**
* 用于响应式地使用 Web 通知
*
* @see https://vueuse.org/useWebNotification
* @see https://developer.mozilla.org/en-US/docs/Web/API/notification
*/
export declare function useWebNotification(
options?: UseWebNotificationOptions,
): {
isSupported: ComputedRef<boolean>
notification: Ref<Notification | null, Notification | null>
ensurePermissions: () => Promise<boolean | undefined>
permissionGranted: ShallowRef<boolean, boolean>
show: (
overrides?: WebNotificationOptions,
) => Promise<Notification | undefined>
close: () => void
onClick: EventHookOn<any>
onShow: EventHookOn<any>
onError: EventHookOn<any>
onClose: EventHookOn<any>
}
export type UseWebNotificationReturn = ReturnType<typeof useWebNotification>源码
贡献者
一纸忘忧
Anthony Fu
Vida Xie
Anthony Fu
Jelf
SerKo
Casper Tollefsen
IlyaL
Sampson Crowley
Michael J. Roberts
丶远方
WuLianN
donotloveshampo
Michael J. Roberts