浏览器标签页favicon设置数字角标

Posted 2021-11-03 STRIVE_LC

        不管是在B/C端系统中，例如具有审批流或者购物网站的订单页面，我们可以将当前待办数或者用户的订单数显示到浏览器的标签页图标上，虽然只是一个小小的功能，但是也能让系统显得与众不同，更加人性化  如下图浏览器标签页数字角标

 

       安装  yarn add favico.js -S

        拿常用的vue项目举例，一般情况下，我们整个系统中只有部分页面需要显示角标的需求，其他页面是不需要显示的，在vue框架中如何实现？那我们就会用到vuex了

// store.js
import Vue from 'vue'
import VueX from 'vueX'
Vue.use(Vuex)
const Favico = require('favico.js')
const store = new Vuex.Store({
    state: {
        favico: new Favico({animation:'none'})
    },
    mutations: {
        setCount(state,num) {
            state.favico.badge(num)
        },
        reset(state) {
            state.favico.reset()
        }
   }
})
export default store


// router.js   因为只需要某些页面显示角标 所以我们需要在进入页面前，在路由卫士做重置处理
import store from './store.js'
import Router from 'vue-router'
router.beforeEach((to,from,next)=>{
        store.commit('reset')
        next()
})

// 显示角标页面
<template>
    <div>demo</div>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
    mounted() {
        this.setCount(3)
    },
    methods: {
        ...mapMutations(['setCount'])
    }
}
</script>

favico基础用法

属性名	说明	默认值
bgColor	徽标的背景颜色	#d00
textColor	徽标的文本颜色	#fff
fontFamily	徽标使用的文本	sans-serif
fontStyle	徽标的字体样式	bold
type	徽标的形状，可以选择circle或者rectangle	circle
position	徽标在整个小图标的定位，可选的有up, down, left, upleft	down
animation	徽标显示的动画，可选的有slide, fade, pop, popFade, none	slide

方法名	说明
image()	使用图像
video()	使用视频
webcam()	使用摄像头
...	...

 具体如何使用，可参考favico.js代码用法，也可参考github中favico.js的如下部分源码

例如该方法需要传入图片dom元素    
/**
		 * Set image as icon  设置图像
		 */
		var image = function (imageElement) {
			_readyCb = function () {
				try {
					var w = imageElement.width;
					var h = imageElement.height;
					var newImg = document.createElement('img');
					var ratio = (w / _w < h / _h) ? (w / _w) : (h / _h);
					newImg.setAttribute('crossOrigin', 'anonymous');
					newImg.onload=function(){
						_context.clearRect(0, 0, _w, _h);
						_context.drawImage(newImg, 0, 0, _w, _h);
						link.setIcon(_canvas);
					};
					newImg.setAttribute('src', imageElement.getAttribute('src'));
					newImg.height = (h / ratio);
					newImg.width = (w / ratio);
				} catch (e) {
					throw new Error('Error setting image. Message: ' + e.message);
				}
			};
			if (_ready) {
				_readyCb();
			}
		};



        /**
		 * Set video as icon  设置视频
		 */
		var webcam = function (action) {
			//UR
			if (!window.URL || !window.URL.createObjectURL) {
				window.URL = window.URL || {};
				window.URL.createObjectURL = function (obj) {
					return obj;
				};
			}
			if (_browser.supported) {
				var newVideo = false;
				navigator.getUserMedia = navigator.getUserMedia || navigator.oGetUserMedia || navigator.msGetUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
				_readyCb = function () {
					try {
						if (action === 'stop') {
							_stop = true;
							icon.reset();
							_stop = false;
							return;
						}
						newVideo = document.createElement('video');
						newVideo.width = _w;
						newVideo.height = _h;
						navigator.getUserMedia({
							video: true,
							audio: false
						}, function (stream) {
							newVideo.src = URL.createObjectURL(stream);
							newVideo.play();
							drawVideo(newVideo);
						}, function () {
						});
					} catch (e) {
						throw new Error('Error setting webcam. Message: ' + e.message);
					}
				};
				if (_ready) {
					_readyCb();
				}
			}

		};

相关资料 github地址： https://github.com/ejci/favico.js