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

在前端开发中，弹窗是非常常用的交互组件之一，而需要开发弹窗的时候，我们可以通过引入一些开源的 npm 包来快速搭建弹窗组件。z-modal 就是其中一款能够提供便捷弹窗功能的 npm 包。

安装

使用 npm 进行安装：

npm install z-modal --save

引入

引入 z-modal 前，需要先引入样式文件：

<link rel="stylesheet" href="./node_modules/z-modal/dist/z-modal.css" />

然后在 js 中引入：

import Modal from 'z-modal';

或者使用 <script> 标签直接引入：

<script src="./node_modules/z-modal/dist/z-modal.js"></script>

使用方法

z-modal 提供了弹窗、信息提示框、确认框 3 种类型的组件，下面分别介绍它们的使用方法。

弹窗（Modal）

const modal = new Modal({
  target: '#modal1',
  width: 500,
  height: 200,
  draggable: true,
});

上面的代码创建了一个 500 x 200 的弹窗，并启用了拖拽功能。其中 target 指定了弹窗的 DOM 对象，可以是 id、class、元素对象等。其他可选参数见下表：

参数名	类型	默认值	描述
width	number	500	弹窗宽度
height	number	400	弹窗高度
draggable	boolean	false	是否启用拖拽
mask	boolean	true	是否显示遮罩层
maskClose	boolean	false	是否点击遮罩层可关闭弹窗
closeButton	boolean	false	是否展示关闭按钮
closeText	string	×	自定义关闭按钮的文本
title	string		弹窗标题
content	string		弹窗内容
onClose	function		弹窗关闭时的回调函数
onBeforeClose	function		弹窗关闭前的回调函数（返回 false 可阻止关闭）

信息提示框（Alert）

const alert = Modal.alert('提示', '这是一条提示信息');

上面的代码弹出一条提示框，用户点击确定按钮后提示框关闭。其他可选参数见下表：

参数名	类型	默认值	描述
mask	boolean	true	是否显示遮罩层
closeButton	boolean	false	是否展示关闭按钮
closeText	string	×	自定义关闭按钮的文本
onOK	function		用户点击“确定”按钮的回调函数

确认框（Confirm）

const confirm = Modal.confirm('确认', '是否确认删除该条记录？');

上面的代码弹出一个确认框，用户点击确定或取消后，确认框关闭。其他可选参数见下表：

参数名	类型	默认值	描述
mask	boolean	true	是否显示遮罩层
closeButton	boolean	false	是否展示关闭按钮
closeText	string	×	自定义关闭按钮的文本
onOK	function		用户点击“确定”按钮的回调函数
onCancel	function		用户点击“取消”按钮的回调函数

示例代码

下面演示了一个示例代码，它能够创建一个带按钮的提示框，并展示了如何在按钮点击后进行回调。

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

总结

z-modal 是一个能够快速搭建弹窗组件的 npm 包，它提供了弹窗、信息提示框、确认框三种组件，使用方法简单，且功能丰富。在实际项目中，可以上手使用，做到快速开发。

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