browser-tip-compatible

Getting Started

``bash
$ 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位置图标

`tsx
import React from 'react';
import { generateBrowserTip } from 'browser-tip-compatible';


export default () =>{
return (



)
}
``

本插件提供基于浏览器页面的消息通知，只需调用函数进行配置即可，

配置项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’ |