前端开发中常常需要使用弹窗来展示一些信息或者进行交互，而基于 Vue 的弹窗组件还是很多的，今天就给大家介绍一个基于 Vue 的弹窗组件 npm 包：vue-basic-modal。
vue-basic-modal 是个非常简单的弹窗组件库，但是它足够扩展和自定义，本文将会较为详细地介绍其使用方法。
安装
vue-basic-modal 可以通过 npm 安装：
npm i vue-basic-modal
或者通过 yarn 安装：
yarn add vue-basic-modal
使用
使用起来也很简单，首先应该将组件注册为 Vue 全局组件，可以在 main.js 文件中完成：
import Vue from 'vue'
import Modal from 'vue-basic-modal'
Vue.component('modal', Modal)
new Vue({
// ...
})之后就可以在组件中使用 modal 标签调用弹窗组件了：
-- -------------------- ---- -------
----------
---- ------------
------ --------------------
------- -- - ----- ----------
------- ----------------- - ------------ --------------
--------
------- ----------------- - ---------- --------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- -----
-
-
-
---------在这个示例中，我们定义了一个 showModal 的变量来控制弹窗的显示和隐藏，当点击 Open Modal 后，我们将 showModal 变量改为 true 即可显示弹窗。又因为我们使用了双向绑定，所以在弹窗中点击 Close Modal 后，showModal 变量又会变为 false，弹窗关闭。
高阶用法
vue-basic-modal 提供了非常灵活的组件扩展机制，除了基本的 show、close 事件，还可以通过插槽实现自定义内容、按钮等等功能。
使用插槽
-- -------------------- ---- -------
-------
--------- --------------
---------- ---------
-----------
--------- ------------
------- --------
-----------
--------- --------------
------- ----------------------------------
------- --------------------------------------
-----------
--------通过 <template> 标签的 v-slot 指令，我们可以在组件中使用插槽。通过 header、body、footer 属性，我们可以实现分别插入头部、内容、底部的自定义内容。
定制样式
如果默认的样式不够满足要求，我们可以通过引入 SCSS 文件或者直接在组件中覆盖 CSS 样式来实现自定义样式。
-- -------------------- ---- -------
-- --------------------------
------- ----------------------------------------
-- --------------------
------ -
------------- -
----------------- -----
------ -----
-
----------- -
-------- -----
- -
---------- -----
-
-
------------- -
----------------- -----
------ -----
-
-总结
通过本文的介绍，我们了解了如何快速地使用 vue-basic-modal 这个 npm 包来实现基本的弹窗功能，并且也学会了一些高阶用法，比如插槽及样式自定义。vue-basic-modal 的源代码也很简单易懂，对于想要自行实现弹窗组件的开发者来说也是个不错的参考例子。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f7277583980