vue浏览器消息提示

JS部分

//判断浏览器是否支持浏览器消息弹窗
suportNotify() {if (window.Notification) {// 支持console.log("支持" + "Web Notifications API");//如果支持Web Notifications API，再判断浏览器是否支持弹出实例this.showMess(event)} else {// 不支持this.$notify("不支持 Web Notifications API");}
},
// 唤起浏览器弹框 前提浏览器得允许弹框通知显示
showMess() {var that =thissetTimeout(function() {console.log('1：' + Notification.permission);//如果支持window.Notification 并且 许可不是拒绝状态if (window.Notification && Notification.permission !== "denied") {//Notification.requestPermission这是一个静态方法，作用就是让浏览器出现是否允许通知的提示Notification.requestPermission(function(status) {//如果状态是同意if (status === "granted") {var m = new Notification('测试标题', {body: '测试内容', //消息体内容icon: '测试icon' //消息图片});//点击当前消息内容m.onclick = function() { //点击当前消息提示框后，跳转到当前页面that.$router.push({path:'/Reception/chatpage'})window.focus();},//点击关闭消息提示框m.onclose = function(){m.close()}} else {that.$notify('当前浏览器不支持弹出消息')}});}}, 1000)},

效果图展示