npm 包 alerted 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

alerted 是一个简单快捷的前端弹窗库，它能够帮助我们快速实现弹窗的功能。它基于 Bootstrap 模态框，使用 jQuery 以及 alertify.js 库作为支撑，提供了丰富的配置项和方法，可以自定义弹窗内容、样式、事件以及动画效果等。

安装

alerted 可以通过 npm 或者 yarn 安装，使用前需确保已安装了 jQuery 和 alertify.js。

npm install alerted --save

yarn add alerted

使用

初始化

先在 HTML 中引入 CSS 和 JS 文件，然后在 JavaScript 中进行初始化。

<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="path/to/alertify.css">
<link rel="stylesheet" href="path/to/alerted.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/alertify.js"></script>
<script src="path/to/alerted.js"></script>

Alerted.init();

弹窗

使用 show 方法来弹出弹窗，并传入相应的参数。

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

其中，title 表示弹窗标题，message 表示弹窗内容，buttons 表示弹窗按钮数组，可以设置多个按钮，每个按钮包含三个属性：text 表示按钮名称，className 表示按钮类名，callback 表示按钮点击回调函数。

配置项

alerted 提供了多个配置项，在 show 方法中传入相应的参数即可进行配置，具体参数及说明如下：

参数	类型	默认值	说明
title	String	空字符串	弹窗标题
message	String	空字符串	弹窗内容
content	String	空字符串	自定义弹窗内容
width	Number	400	弹窗宽度（单位：px）
height	Number	240	弹窗高度（单位：px）
buttons	Array	空数组	弹窗按钮数组
buttonAlign	String	right	弹窗按钮对齐方式（left、center、right）
resizable	Boolean	true	是否可以调整弹窗大小
draggable	Boolean	true	是否可以拖拽弹窗
padding	Number	20	弹窗内边距（单位：px）
modal	Boolean	true	是否启用模态框
backdrop	Boolean	true	是否显示背景遮罩
effect	Function	空函数	弹窗动画效果
onShow	Function	空函数	弹窗打开时的回调函数
onHide	Function	空函数	弹窗关闭时的回调函数

方法

alerted 提供了多个方法，用于控制弹窗的显示和隐藏，具体方法及说明如下：

方法	参数	说明
show	options	显示弹窗
hide		隐藏弹窗
setTitle	title	设置弹窗标题
setMessage	message	设置弹窗内容
setContent	content	设置自定义内容
setButtons	buttons	设置弹窗按钮
setEffect	effect	设置弹窗动画效果
setPadding	padding	设置弹窗内边距
setSize	width, height	设置弹窗大小
setPosition	left, top	设置弹窗位置
setModal	modal	设置模态框
setBackdrop	backdrop	设置背景遮罩
onShow	callback	弹窗打开时回调函数
onHide	callback	弹窗关闭时回调函数

示例

<button class="btn btn-primary" id="showAlert">弹出弹窗</button>

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

总结

以上是 alerted 的使用教程，我们可以看出来，它使用起来非常方便，提供了多样的配置项和方法，可以适应各种需求。在实际项目中，我们可以根据具体业务场景选择合适的配置项和方法，来实现弹窗功能。

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