2款轻量级JS弹窗提示分享

小半 • 2023年2月9日下午5:11 • 微信精选 • 阅读 510

已经很久没有更新文章了，今天来分享2款JS弹窗提示。

Bootstrap弹窗提示不是特别的方便，于是就收集了一下开源的js提示组件，特点是轻量、使用方便。

notify.js

Github地址：https://github.com/Go7hic/notify.js

使用方法

引用 notify.js

<script src="notify.js"></script>

方法

notify.alert(1, '成功提示', 1.5);
notify.alert(2, '警告提示', 1.5);
notify.alert(3, '危险提示', 1.5);
notify.alert(4, '正常提示', 1.5);

其中 1，2，3，4代表四种提示的类型，1==success, 2==warn, 3==danger, 4==primary，1.5表示提示多久后消失

coco-message

coco-message 是一个简单实用的Javascript信息提示插件，兼容主流浏览器，兼容至ie9 (ie没有svg动画)

github地址：https://github.com/TheWindRises-2/coco-message#usageUsage

install via cnpm:

cnpm install coco-message -S

import cocoMessage from 'coco-message'
  
cocoMessage('hello world')
or
cocoMessage.info('hello world')

<script src="https://unpkg.com/coco-message/coco-message.min.js"></script>

暗黑模式

<html class="dark">

在html标签上添加dark样式名即可

基本用法

对参数没有顺序要求，cocoMessage会根据参数的数据类型进行解析

  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
  );