简约消息通知Js插件代码分享

今天在逛博客的时候发现了一个很不错的消息通知，所以我决定逆向抓取源码分析后发现，该消息通知其实是用的ElmentUI里面的el-notification通知组件来做，对这个组件进行魔改 添加上了图标以及震动的效果

当然这个通知更适合电脑端使用

下面是我编写好的Js代码，直接注入到网页即可使用（需要注意的是注入的网页如果不支持跨域请求会报错）

function loadJsorCss(type,path,id,callback){
  let header=document.getElementsByTagName("head")[0];
  let addEle=document.createElement('script');
  if(type===1){
    addEle.setAttribute('src',path);
  }
  if(type===2){
    addEle=document.createElement('link');
    addEle.setAttribute('href',path);
    addEle.setAttribute('rel',"stylesheet");
    addEle.setAttribute('type',"text/css");
    addEle.setAttribute('media',"all");
  }
  addEle.setAttribute('id',id);
  header.appendChild(addEle);
  //对于浏览器的判断是ie还是其他
  if(!/*@cc_on!@*/false){
      addEle.onload=function(){
        console.log("非ie");
        callback();
      }
  }else{
    addEle.onreadystatechange=function(){
      if(addEle.readystate==="loaded" ||addEle.readState==='complate'){
        console.log("ie");
        callback();
      }
    }
  }
}

loadJsorCss(1,"https://bk.yyge.net/Jsdata/js/notification/vue.min.js","vue-js",()=>{
  loadJsorCss(1,"https://bk.yyge.net/Jsdata/js/notification/elmentui.min.js","elmentui-js",()=>{
    loadJsorCss(2,"https://bk.yyge.net/Jsdata/js/notification/elmentui.min.css","elmentui-css",()=>{
      loadJsorCss(2,"https://bk.yyge.net/Jsdata/js/notification/ShakeEffect.css","BrainChild_list_floating-css",()=>{
        document.addEventListener('contextmenu', function(event) {
          // 鼠标右键被点击
          Vue.prototype.$notify({
              title: '嘿！没有右键菜单',
              message: '复制请用键盘快捷键Ctrl+C',
              type: 'warning'
          })
          // 阻止默认的右键菜单显示
          event.preventDefault();
        });
        document.addEventListener('keydown', function(event) {
          if (event.keyCode === 123) {
            // F12键被按下
            Vue.prototype.$notify({
                title: '嘿！Bingo~',
                message: '老弟试试Alt+Shift+Fn+F4',
                type: 'error'
            })
           // 阻止默认的右键菜单显示
            event.preventDefault();
            // 在这里执行你想要的操作
          }
        });
      })
    })
  })
})

使用：

//type 类型可切换为info、error、warning等具体可以参考ElementUI的消息组件
Vue.prototype.$notify({
    title: '嘿！Bingo~',
    message: '老弟试试Alt+Shift+Fn+F4',
    type: 'error'
})

说明：如果您会前端的相关知识 建议直接参考上面的代码 在自己项目里面去导入相关依赖，如上代码只适合外部注入