set-browser-compatible-tips v1.0.2

设置浏览器兼容提示信息

能力:

1. 对需要兼容大部分浏览器的系统设置“不支持的浏览器”
2. 对只兼容单独浏览器的系统设置“需兼容的浏览器”
3. 提示内容的配置如 字体大小、颜色，展示的背景色

Examples

使用 VSCode 插件 Live Server 启动以下目录 html 文件，并可通过修改script标签中的browserConfigTipsInfo查看效果:

浏览器兼容: examples/index.html

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

API使用

/*
字段
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

/* 字段释意同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】文件

{
    "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. 配置后的使用

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

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

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

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