网站多国语言湖北省建设规划网站

需求：浏览器标签页 动态赋值 闪烁

彩色浏览器标签页标题：目前没有纯前端解决方案‌

• 方式1：用 Emoji 或特殊符号‌ 增强视觉效果（如 🔴 重要通知）
• ‌方式2：在页面内使用 <h1> + CSS‌ 替代标题显示
• ‌方式3：引导用户安装浏览器插件‌ 自定义样式

示例：

使用方式1：做假动作 显示隐藏 替换 来实现闪烁效果

效果：

无标题有标题替换显示

无标题

有标题

 主要代码

  let isVisible = true //1秒闪烁使用let globalTitle: string = '排班管理系统';let webTitle = '首页';let title = `${webTitle} - ${globalTitle}` || globalTitle; //浏览器标签名 可动态设置let titleFlashTag = true //是否闪烁//在指定页面做效果 使用if 做判断if (router.currentRoute.value.path == '/shiftHandover/index' || router.currentRoute.value.path == '/jjb') {// storeViewDeta.$state.titleFlashTagTimes 存一个定时器字段到 vuex或者pinia 中 做切换页面时清空定时使用storeViewDeta.$state.titleFlashTagTimes = setInterval(() => {if (titleFlashTag) {isVisible = !isVisible//isVisible 为true显示 🔴 ${title} 图标加标题，为false 显示 自定义标题 //每秒切换显示 做闪烁效果document.title = isVisible ? ` 🔴 ${title}` : globalTitle}}, 1000)} else {//清空定时器 不做标题闪烁clearInterval(storeViewDeta.$state.titleFlashTagTimes)document.title = title}