1.0.6 • Published 1 year ago
browser-tip-compatible v1.0.6
browser-tip-compatible
Getting Started
$ npm i browser-tip-compatible此版本为兼容版本，适用React18以下版本以及非less项目
1.0.4 版本修改
options新增node字段（可以直接使用jsx）
config新增useStorage，默认不保存未删除的通知，useStorage为false时node生效，为true时仅可使用body添加string字符串通知
config新增style可自定义样式
1.0.6 版本修改
config新增withoutIcon字段，默认false，使用Icon位置图标
import React from 'react';
import { generateBrowserTip } from 'browser-tip-compatible';
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（提示栏图标） | -- |
| node | 可直接插入div（jsx） | 空 |
| 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 |
| style | object（通知栏样式） | {} |
| useStorage | false （localStorage保存未删除通知，node仅在为false生效） | false |
| maxLength | number（提示栏数量限制） | 5 |
| compWrapper | string，提示栏渲染父元素（在该父标签下进行提示，默认为root元素） | ‘root’ |
| storageName | string（localStorage存储提示信息key） | ‘currentBrowserTipArr’ |
| notifyType | string，（’auto‘，默认选择webnotification，若无权限则使用浏览器提示栏；’system‘，只启用webnotification，用户关闭权限后则无通知展示，‘self’，只启用浏览器提示栏，不使用webnotification） | ‘auto’ |