@MUPIAO/ALERT

Web 前端开发 常用弹窗、抽屉、确认框、加载框、弹出层、模态框、消息提示等工具集！

下载安装：

# 使用npm命令下载安装
$ npm i @mupiao/alert

# 使用yarn命令下载安装
yarn add @mupiao/alert

使用方法：

• 通过 JS Module(模块)方式导入使用

  <!-- ES6模块导入使用 -->
  <script type="module">
    /**
     * 1、全部引入使用
     **/
    import * as mu from "@mupiao/alert";
  
    // 在浏览器控制台中打印mu-alert的所有方法
    console.log(mu);
  
    // 显示加载动画
    mu.loading();
  
    // 关闭加载动画
    mu.loading.close();
  
    /**
     * 2、按需引入使用
     **/
    import { loading, message, notice, drawer, dialog } from "@mupiao/alert";
  
    // 显示加载动画
    loading();
  
    // 关闭加载动画
    loading.close();
  </script>

• 通过 script 标签以 CDN 的形式引入使用

  <!-- 将mu-alert.js下载后，在html文件中引入本地脚本 -->
  <script src="./js/mu-alert.js"></script>
  <script>
    // 在浏览器控制台中打印mu-alert的所有方法
    console.log(mu);
    
    // 显示加载动画
    mu.loading;
    
    // 关闭加载动画
    mu.loading.close();
  </script>

重写函数：

• alert() 弹框

  重写 window 对象下的 alert 方法。

  /**
   * @param {String} message // 要弹出的文本
   * @returns Undefined
   */
  
  alert("Hello World");

• confirm() 确认框

  重写 window 对象下的 confirm 方法。

  /**
   * @param {String} message // 要提示的文本
   * @param {Function} enterFn // 确定回调方法
   * @param {Function} cancelFn // 取消回调方法
   * @returns Undefined
   */
    
  confirm(
    "Hello World",
    () => {
      // 点击了确定按扭
    },
    () => {
      // 点击了取消按扭
    }
  );

支持情况：

• loading() 请求加载

  常用于数据请求、数据加载等待时 显示的反馈动效。

  // 显示加载动画
  mu.loading();
  
  // 关闭加载动画
  mu.loading.close();

• message() 消息提示

  常用于主动操作后的反馈提示。在顶部居中显示，并自动消失。有多种不同的提示状态可选择。

  /**
   * @param message {String | Object}  // 提示内容 | 样式类型（必传）
   * @param callback? {Function}  // 关闭后的回调函数（非必传）
   * @returns Undefined
   */
    
  // 调用方式1
  mu.message("我是message消息提示，我在3秒后自动关闭！", () => {
    console.log("提示已关闭！");
  });
    
  // 调用方式2 success(): 成功提示，error()：错误提示，warning()：警告提示
  mu.message.success("我是message消息提示，我在3秒后自动关闭！", () => {
    console.log("提示已关闭！");
  });
    
  // 调用方式3
  mu.message({
    type: "success", // "success": 成功提示，"error"：错误提示，"warning"：警告提示
    message: "我是message消息提示，我在3秒后自动关闭！",
    duration: 3000, // 显示时间（默认3秒）, 单位(毫秒)，
    callback: () => {
      //  关闭后的回调函数（非必传）
      console.log("提示已关闭！");
    },
  });

后续更新。。。！