npm 包 messa 使用教程

简介

如果你是前端开发者，你一定会需要在项目中使用各种 npm 包。在前端开发中，messi 是一个非常优秀的提示框和消息框库。它支持多种弹窗效果，包括 modal，toast 等等，非常方便。

安装

使用 npm 安装 messa：

npm install messa --save

安装完成后，你就可以在代码中使用 messa 了。

使用

引入

在你的项目中引入 messa：

import messa from 'messa';

如果你使用的是旧版浏览器或者 es5，可以使用以下方式引入：

const messa = require('messa');

基本用法

在 html 中添加一个按钮，当点击按钮时触发 messa：

<button onclick="showMessage()">点击显示</button>

在 javascript 中编写 showMessage 函数：

function showMessage() {
  messa.show({
    title: '提示',
    message: '欢迎使用 messa',
    type: 'success'
  });
}

在页面中点击按钮，就可以看到 messa 的效果了：

类型

messa 支持多种类型的弹框，包括：success, warning, error, info, loading。

可以通过 type 属性来指定类型：

messa.show({
  title: '提示',
  message: '欢迎使用 messa',
  type: 'warning'
});

自定义

messa 支持自定义按钮文字，以及自定义弹框内容。

-- -------------------- ---- -------
------------
  ------ --------
  -------- -
    ------ ----------- --------- --------------------
  --
  ----- -------
  -------- -
    -
      ----- -----
      -------- -------- -- -
        ---------------------------------------------------
      -
    --
    -
      ----- -----
      -------- -------- -- -
        ------------------
      -
    -
  -
---

效果如下：

其他选项

可以通过 messa.show 的第三个参数来设置其他选项。

例如，可以设置弹框显示 3 秒钟，不显示遮罩，允许点击遮罩关闭弹框：

-- -------------------- ---- -------
------------
  ------ -----
  -------- ----- -------
  ----- ---------
-- --- -
  --------- -----
  -------- ------
  ------------- ----
---

总结

messa 是一个非常优秀的提示框和消息框库，支持多种类型的弹框，同时支持自定义内容和按钮。通过本文，你已经学会了 messa 基本用法、类型、自定义和其他选项。希望本文能够对你的前端开发工作有所帮助。最后，附上完整示例代码：

-- -------------------- ---- -------
--------- -----
------

------
  ----- ----------------
  ---------- - ----- ------------
  ----- ------------------------------------------------------------ -----------------
-------

------
  ------- -------------------------------------
  ------- --------------------------------------------------------------------
  --------
    -------- ------------- -
      ------------
        ------ -----
        -------- ----- -------
        ----- ---------
      -- --- -
        --------- -----
        -------- ------
        ------------- ----
      ---
    -
  ---------
-------

-------

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3e1d8e776d08040b48