【UI】 cocomessage消息提示插件

在线示例
JQuery插件库地址
GitHub地址

安装

方法一

cnpm install coco-message -S

vue单文件中引用

import cocoMessage from 'coco-message'  

方法二

vue单文件中直接引入 <script src="https://unpkg.com/coco-message/coco-message.min.js"></script>

示例代码

//
cocoMessage.info(3000, "请先登录！", function () {
  console.log("close");
});
//
var div1 = document.createElement("div");
div1.innerText = "修改成功！";
cocoMessage.success(div1);
// 
cocoMessage.warning("需要手动关闭", 0);
// 
cocoMessage.error("修改失败！", 3000);
// 
var closeMsg = cocoMessage.loading(true);
setTimeout(function () {
  closeMsg();
}, 4000);
// 
cocoMessage.destroyAll();

基本用法

  cocoMessage.config({       //全局配置
    duration: 10000,         //消息显示时长
  });
      
  const close = cocoMessage.info(
   "请先登录！",            //消息文本
   3000,                    //消息显示时长
    ()=> {                  //回调函数
     console.log("close");
    }
  );
  
  close();                  //关闭消息方法
  
            
  var div = document.createElement("div");
  div.innerText = "修改成功！";
  cocoMessage.success(
    ()=>{
      console.log("close");
    },
    div
  );