简介
vue-pbox 是一个 Vue.js 的弹出层组件库，其主要用途是展示内容或获取用户输入。该库提供了各种不同类型的弹出层，以及配置项来自定义弹出层样式、行为和内容。
安装
你可以通过 npm 来安装 vue-pbox，使用如下命令即可：
npm install vue-pbox --save
安装成功后，在你的项目中引入该库：
import Vue from 'vue'; import PBox from 'vue-pbox'; Vue.use(PBox);
使用
基础用法
最简单的基础用法如下：
-- -------------------- ---- -------
----------
-----
------- ----------------------------------
------ ---------------------
--------------
------------
------- ----------------------------------
--------
------
-----------
--------
------ ------- -
------ -
------ -
-------------- -----
--
--
-------- -
------------ -
------------------ - -----
--
------------ -
------------------ - ------
-
-
--
---------默认情况下，vue-pbox 提供了 pBox 组件，可以直接在模板中使用。在上述例子中，当点击 显示弹出层 按钮时，会显示弹出层，当点击 关闭弹出层 按钮时，会关闭弹出层。
提供多种样式
vue-pbox 提供了一系列的样式来让你自由的定制你的弹出层，只需要在 pBox 组件上添加一个名为 type 的属性即可。例如：
-- -------------------- ---- -------
----------
-----
------- ---------------------------- -----------
------ -------------------- -------------
--------------
------------
------- ----------------------------------
--------
------- ----------------------------- -----------
------ --------------------- -------------
--------------
------------
------- -----------------------------------
--------
------
-----------
--------
------ ------- -
------ -
------ -
-------------- ------
--------------- -----
--
--
-------- -
------------ -
------------------ - -----
--
------------ -
------------------ - ------
--
------------- -
------------------- - -----
--
------------- -
------------------- - ------
-
-
--
---------自定义弹出层的宽度和高度
对于一些场景，你可能需要自定义弹出层的宽度和高度。你可以在 pBox 组件上添加 width 和 height 属性来实现该需求，例如：
-- -------------------- ---- -------
----------
-----
------- ----------------------------------
------ -------------------- ------------- ---------------
--------------
------------
------- ----------------------------------
--------
------
-----------
--------
------ ------- -
------ -
------ -
-------------- -----
--
--
-------- -
------------ -
------------------ - -----
--
------------ -
------------------ - ------
-
-
--
---------API
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| visible | Boolean | false | 弹出层是否显示 |
| type | String | - | 弹出层的样式，可选值包括 'default', 'type1', 'type2', 'type3', 'type4'... |
| width | String | - | 弹出层的宽度，如 '500px' |
| height | String | - | 弹出层的高度，如 '300px' |
| close-on-click-modal | Boolean | true | 当设置为 true 时，点击模态框会关闭弹出层 |
总结
vue-pbox 是一个非常方便的弹出层组件库，可以帮助你快速地构建你的弹出层。在应用中，你可以根据自己的需求来选用不同类型的弹出层或自定义样式，并通过设置 width 和 height 属性来自定义弹出层大小。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf681e8991b448e6bd0