# set-browser-compatible-tips

> `能力:`

Latest version **1.0.2** (published 2022-01-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install set-browser-compatible-tips
pnpm add set-browser-compatible-tips
yarn add set-browser-compatible-tips
bun add set-browser-compatible-tips
```

Provides the command `browser-tips-build`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-01-04 |
| First published | 2021-12-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 75.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yiyouliao |
| Maintainers | yiyouliao |
| Keywords | yiyouliao |

## Links

- npm: https://www.npmjs.com/package/set-browser-compatible-tips
- Repository: http://gitlab.yiyouliao.net/huabaoyu/browser-compatible-tips/tree/master
- npm.io page: https://npm.io/package/set-browser-compatible-tips

## Dependencies (7)

- [chalk](https://npm.io/package/chalk.md) 2.4.2
- [core-js](https://npm.io/package/core-js.md) ^3.20.0
- [signale](https://npm.io/package/signale.md) ^1.4.0
- [ua-parser-js](https://npm.io/package/ua-parser-js.md) ^1.0.2
- [yargs-parser](https://npm.io/package/yargs-parser.md) ^21.0.0
- [child_process](https://npm.io/package/child_process.md) ^1.0.2
- [update-notifier](https://npm.io/package/update-notifier.md) ^5.1.0

## Recent versions

- 1.0.2 (latest) — 2022-01-04
- 1.0.1 — 2021-12-27
- 1.0.0 — 2021-12-27

## README

## 设置浏览器兼容提示信息

 `能力:`

1. 对需要兼容大部分浏览器的系统设置“不支持的浏览器”
2. 对只兼容单独浏览器的系统设置“需兼容的浏览器”
3. 提示内容的配置如 字体大小、颜色，展示的背景色
<!--需要传递的东西需要更改，比如说下载链接 -->

#### Examples

使用 VSCode 插件 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 启动以下目录 html 文件，并可通过修改script标签中的browserConfigTipsInfo查看效果:

`浏览器兼容:` examples/index.html

#### 方案一：API调用（**推荐使用**）

 `API使用`

```js
/*
字段
compatible 兼容浏览的列表：兼容个别浏览器，大部分不兼容的时候设置。
ignore 不支持浏览器的列表：兼容大部分浏览器，个别不兼容的时候设置。
tipsStyle 提示样式

注：compatible 和 ignore同时配置时 ，以compatible配置为准
*/

/* 在项目入口文件中导入插件 */
import setBrowserCompatibleTips from 'set-browser-compatible-tips'

/* 配置参数 */
const browserTipsInfoConfig = {
    compatible: [{
        browserName: 'chrome', // 浏览器名称
        version: '90', // 主版本号90以上都兼容，当为字符串 ‘**’ 时代表全部兼容
    }],
    ignore: [{
        browserName: 'chrome',
        version: '90', // 主版本号90以下不支持，当为字符串 ‘**’ 时代表全部不支持
    }],
    tipsStyle: {
        title: '产品名称'
        tipsText: '提示文字：如不支持当前浏览器，建议下载以下浏览器使用', // 提示文字
        browserDwonloadTips: [{
            name: 'chrome',
            imgUrl: 'https://yiyouliao-static.nos-eastchina1.126.net/1640249065739all.png', // 绝对路径
            downloadUrl: 'http://www.baidu.com', // 下载地址
            downloadUrlBgc: '#437ACF' //下载文字背景色
        }, ]
    },
}

/* 在项目入口文件中调用（最先调用） */
setBrowserCompatibleTips(browserTipsInfoConfig)
```

#### 方案二：配置文件（**暂不推荐使用**）

1. 在项目的package.json中配置browserTipsInfoConfig

```json
/* 字段释意同API调用 */
{
    //...package.json的其他配置

    "browserTipsInfoConfig": {
        "compatible": [
            {
                "browserName": "chrome",
                "version": "90"
            },
        ],
        "ignore": [
            {
                "browserName": "chrome",
                "version": "90"
            }
        ],
        "tipsStyle": {
            "title": "产品名称",
            "tipsText": "提示文字：如不支持当前浏览器，建议下载以下浏览器使用", // 提示文字
            "browserDwonloadTips": [{
                "name": "chrome",
                "imgUrl": "https://yiyouliao-static.nos-eastchina1.126.net/1640249065739all.png", // 绝对路径
                "downloadUrl": "http://www.baidu.com", // 下载地址
                "downloadUrlBgc": "#437ACF" //下载文字背景色
            }]
        },
    }
}
```

2. 直接在项目根目录中创建并配置【yylBrowserlist.json】文件

```json
{
    "browserTipsInfoConfig": {
        "compatible": [
            {
                "browserName": "chrome",
                "version": "90"
            },
        ],
        "ignore": [
            {
                "browserName": "chrome",
                "version": "90"
            }
        ],
       "tipsStyle": {
            "title": "产品名称",
            "tipsText": "提示文字：如不支持当前浏览器，建议下载以下浏览器使用", // 提示文字
            "browserDwonloadTips": [{
                "name": "chrome",
                "imgUrl": "https://yiyouliao-static.nos-eastchina1.126.net/1640249065739all.png", // 绝对路径
                "downloadUrl": "http://www.baidu.com", // 下载地址
                "downloadUrlBgc": "#437ACF" //下载文字背景色
            }]
        },
    }
}
```

3. 配置后的使用

```js
/* 在项目入口文件中导入插件 */
import setBrowserCompatibleTips from 'set-browser-compatible-tips'

/* 优先于vue应用之前调用 */
setBrowserCompatibleTips()
```

```json
/* 在项目package.json中创建脚本命令,在 dev命令 和 build命令 之前先执行 */
"browser-tips-build": "browser-tips-build"
```

4. 当 【package.json】 中的配置和 【yylBrowserlist.json】同时存在时，以【yylBrowserlist.json】中配置为准

---
_Source: https://npm.io/package/set-browser-compatible-tips · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._