????????不管是在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>
| 属性名 | 说明 | 默认值 |
| 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