1.0.2 • Published 1 year ago
browser-tip v1.0.2
browser-tip
Getting Started
$ npm i browser-tip
import React from 'react';
import { generateBrowserTip } from 'browser-tip';
export default () =>{
return (
<div>
<button
onClick={()=>{
//调用函数generateBrowserTip(options,config)生成通知
generateBrowserTip({title:'this is Title',body:'this is body text'},{maxLength:3})
}}
>
添加通知
</button>
</div>
)
}
本插件提供基于浏览器页面的消息通知,只需调用函数进行配置即可,
配置项options(同名参数参考webnotification使用系统api即可)参数如下
字段 | 类型(示例) | 默认值 |
---|---|---|
body | string(提示栏展示主体内容) | -- |
title | string(提示栏标题) | tip |
image | string(提示栏图标) | 如上图 |
icon | 同webnotification | 空 |
requireInteraction | 同webnotification | true |
silent | 同webnotification | true |
onClick | func(点击提示栏回调) | 空 |
onShow | func(提示栏首次打开回调) | 空 |
onClose | func(关闭提示栏回调) | 空 |
配置项config(仅针对浏览器提示栏配置,与webnotification无关)参数如下
字段 | 类型(示例) | 默认值 |
---|---|---|
position | string,提示栏弹出位置('top-right'|'top-left'|'bottom-left'|'bottom-right') | 'top-right' |
height | number(提示栏高度) | 70 |
width | number(提示栏宽度) | 300 |
maxLength | number(提示栏数量限制) | 5 |
compWrapper | string,提示栏渲染父元素(在该父标签下进行提示,默认为root元素) | ‘root’ |
storageName | string(localStorage存储提示信息key) | ‘currentBrowserTipArr’ |
notifyType | string,(’auto‘,默认选择webnotification,若无权限则使用浏览器提示栏;’system‘,只启用webnotification,用户关闭权限后则无通知展示,‘self’,只启用浏览器提示栏,不使用webnotification) | ‘auto’ |