1.1.4 • Published 2 years ago
browser-compatible-tips v1.1.4
浏览器不兼容的提示
能力:
- 对需要兼容大部分浏览器的系统设置“不支持的浏览器”
- 对只兼容单独浏览器的系统设置“需兼容的浏览器”
- 提示内容的配置如 字体大小、颜色,展示的背景色
Examples
使用 VSCode 插件 Live Server 启动以下目录 html 文件,并可通过修改script标签中的browserConfigTipsInfo查看效果:
浏览器兼容:
examples/index.html
方案一:API调用(推荐使用)
API使用
/*
字段
compatible 兼容浏览的列表。兼容个别浏览器,大部分不兼容的时候设置。
ignore 不支持浏览器的列表。兼容大部分浏览器,个别不兼容的时候设置。
tipsStyle 提示样式
注:compatible 和 ignore同时配置时 ,以compatible配置为准
*/
/* 在项目入口文件中导入插件 */
import browserCompatibleTips from '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' //下载文字背景色
}, ]
},
}
/* 在项目入口文件中调用(最先调用) */
browserCompatibleTips(browserTipsInfoConfig)
方案二:配置文件(暂不推荐使用)
- 在项目的package.json中配置browserConfigTipsInfo
/* 字段释意同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" //下载文字背景色
}]
},
}
}
- 直接在项目根目录中创建并配置【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" //下载文字背景色
}]
},
}
}
- 配置后的使用
/* 在项目入口文件中导入插件 */
import browserCompatibleTips from 'browser-compatible-tips'
/* 优先于vue应用之前调用 */
browserCompatibleTips()
/* 在项目package.json中创建脚本命令,在 dev命令 和 build命令 之前先执行 */
"browser-tips-build": "browser-tips-build"
- 当 【package.json】 中的配置和 【yylBrowserlist.json】同时存在时,以【yylBrowserlist.json】中配置为准