在前端开发中，模态框是非常常见的组件，例如在表单提交、登录等操作时都会用到，而 @melmacaluso/vue-modal 就是一个优秀的模态框组件，它提供了简单易用的操作方式和丰富的配置选项，下面我们来详细了解一下。
安装
首先我们需要安装这个 npm 包，通过命令行进入到项目的根目录，运行以下命令：
npm install @melmacaluso/vue-modal --save
使用
使用这个组件也很简单，只需要在项目中引入即可：
import Vue from 'vue'
import Modal from '@melmacaluso/vue-modal'
Vue.component('modal', Modal)这个组件提供了两种方式触发模态框：通过 JavaScript 和通过 Vue 模板。
通过 JavaScript
通过 JavaScript 方式，我们需要在 Vue 实例中调用 $modal 方法：
this.$modal.show('modal-id')其中 modal-id 为组件中定义的 modal-id 属性，如下所示：
-- -------------------- ---- -------
----------
------ ---------------- -------------
--- ------------------- ----------
---- ------------
------- -- --- ----- ---------
------
---- --------------
------- ---------- ------------ -----------------------------------------------
------
--------
-----------在这个示例中，我们定义了一个名为 modal-id 的模态框，它包含一个标题、一个内容和一个按钮。
通过 Vue 模板
另外一种方式是在 Vue 模板中直接使用组件：
-- -------------------- ---- -------
----------
-----
------- ---------- ------------ ------------------------------------- --------------
------ ---------------- -------------
--- ------------------- ----------
---- ------------
------- -- --- ----- ---------
------
---- --------------
------- ---------- ------------ -----------------------------------------------
------
--------
------
-----------我们在模板中定义了一个按钮，点击后触发组件的 show 方法。
参数
这个组件还提供了很多自定义的配置选项，下面列举其中几个：
id
modal-id，在触发模态框时需要使用。
transition
默认情况下，这个组件会渐隐渐显，我们可以通过 transition 自定义其动画。
-- -------------------- ---- -------
----------
------ ---------------- ---------------------
--- ------------------- ----------
---- ------------
------- -- --- ----- ---------
------
---- --------------
------- ---------- ------------ -----------------------------------------------
------
--------
-----------fade 是一个内置的动画名称，它会在模态框在显示和隐藏时逐渐消失。
esc-close
当用户按下 ESC 键时，是否自动关闭模态框。
-- -------------------- ---- -------
----------
------ ---------------- ------------------
--- ------------------- ----------
---- ------------
------- -- --- ----- ---------
------
---- --------------
------- ---------- ------------ -----------------------------------------------
------
--------
-----------delay
模态框显示和隐藏的延迟时间，单位为毫秒。
-- -------------------- ---- -------
----------
------ ---------------- -------------
--- ------------------- ----------
---- ------------
------- -- --- ----- ---------
------
---- --------------
------- ---------- ------------ -----------------------------------------------
------
--------
-----------总结
@melmacaluso/vue-modal 是一个非常实用的模态框组件，无论是使用还是自定义配置都非常简单，它提供了丰富的功能、灵活易用的特性，帮助我们快速构建完善的界面交互体验，非常值得推荐。
示例代码可参考：
-- -------------------- ---- -------
----------
-----
------- ---------- ------------ ------------------------------------- --------------
------ ---------------- ------------ ----------------- ---------------------
--- ------------------- ----------
---- ------------
------- -- --- ----- ---------
------
---- --------------
------- ---------- ------------ -----------------------------------------------
------
--------
------
-----------
--------
------ --- ---- -----
------ ----- ---- ------------------------
---------------------- ------
------ ------- -
----- ------------
---- -- -
------ --
-
-
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822ce1