npm 包 elbgoods-alert 使用教程

在前端开发中，我们经常需要使用弹窗来提醒用户一些信息。在这种情况下，使用 elbgoods-alert 这个 npm 包将会是一个很好的选择。本文将带领大家学习使用这个 npm 包。

安装

使用 npm 安装 elbgoods-alert:

npm install elbgoods-alert --save

安装成功后，在需要使用的地方引入 elbgoods-alert:

import elbgoodsAlert from 'elbgoods-alert';

使用方式

使用 elbgoodsAlert 方法来创建一个新的 alert 弹窗:

elbgoodsAlert({
  title: '提示',
  message: '这是一条提示信息',
  type: 'info'
});

这里我们指定了弹窗的标题、信息和弹窗类型。可以看到，elbgoodsAlert 方法使用一个参数来指定弹窗的各个属性。下面我们来详细介绍这些属性的含义以及可选值。

属性

title

指定弹窗的标题，可以是纯文本或 HTML 代码。如果不指定此属性，则弹窗不显示标题。

message

指定弹窗的信息，可以是纯文本或 HTML 代码。如果不指定此属性，则弹窗不显示信息。我们可以在 message 中指定字符串以及一些标签，如下:

elbgoodsAlert({
  title: '提示',
  message: '<p>这是一条提示信息</p><p>这是另一条提示信息</p>',
  type: 'info'
});

type

指定弹窗的类型，可选值有:

• success：表示成功提示信息
• info：表示一般提示信息
• warning：表示警告信息
• error：表示错误信息

如果不指定此属性，则默认为 info 类型。

回调函数

你还可以指定两个回调函数，以便在弹窗打开和关闭时执行自定义的代码。

onOpen

指定弹窗打开时执行的函数，如下:

elbgoodsAlert({
  title: '提示',
  message: '这是一条提示信息',
  onOpen: function() {
    console.log('弹窗已打开');
  }
});

onClose

指定弹窗关闭时执行的函数，如下:

elbgoodsAlert({
  title: '提示',
  message: '这是一条提示信息',
  onClose: function() {
    console.log('弹窗已关闭');
  },
});

使用示例

下面我们来看一个完整的使用示例:

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

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

结语

本文介绍了如何使用 npm 包 elbgoods-alert 来创建弹窗。了解了这个 npm 包的使用方法，可以使我们在前端开发中更加便捷地使用弹窗来提醒用户一些信息。

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