mu-alert
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

MU-ALERT


MIT License

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

下载安装:

# 使用npm命令下载安装
$ npm i mu-alert

# 使用yarn命令下载安装
yarn add mu-alert

使用方法:

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

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

    <!-- 将mu-alert.js下载后,在html文件中引入本地脚本 -->
    <script src="./js/mu-alert"></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 {String | Object}  // 提示内容 | 样式类型
     * @returns Undefined
     */
    
    // 调用方式1
    mu.message("我是message消息提示,我在3秒后会自动关闭!");
    
    // 调用方式2 success(): 成功提示,error():错误提示,warning():警告提示
    mu.message.success("我是message消息提示,我会在3秒后自动关闭!");
    
    // 调用方式3
    mu.message({
      type: "success", // "success": 成功提示,"error":错误提示,"warning":警告提示
      message: "我是message消息提示,我会在3秒后自动关闭!",
      duration: 3000   // 显示时间(默认3秒), 单位(毫秒)
    });

后续更新。。。!

Dependents (0)

Package Sidebar

Install

npm i mu-alert

Weekly Downloads

2

Version

1.0.2

License

MIT

Unpacked Size

15.4 kB

Total Files

5

Last publish

Collaborators

  • muguilin