简介
cbp-vue-toastr 是一款基于 Vue 开发的轻量级消息通知插件，它支持多种类型的消息提示，例如成功、失败、信息、警告等，同时也支持自定义消息内容及配置项。cbp-vue-toastr 易于集成到 Vue 项目中，是一款开发效率提高的利器。
安装
我们可以通过 npm 进行安装：
npm install cbp-vue-toastr --save
或者使用 yarn：
yarn add cbp-vue-toastr
引入
在 Vue 项目中，我们可以将 cbp-vue-toastr 引入到全局或某个局部组件中，以下是引入到全局的示例代码：
// 引入 cbp-vue-toastr
import Vue from 'vue'
import CbpVueToastr from 'cbp-vue-toastr'
// 将 cbp-vue-toastr 注册为全局组件
Vue.component('cbp-vue-toastr', CbpVueToastr);如果只需要在某个局部组件中使用 cbp-vue-toastr，可以直接在该组件中进行引入：
-- -------------------- ---- -------
-- -- --------------
------ ------------ ---- ----------------
-- ---- ---------- --- -------------- --
------ ------- -
----------- -
----------------- -------------
--
-使用
使用 cbp-vue-toastr 插件非常简单，我们只需要在模板中添加 cbp-vue-toastr 标签，并通过 props 传递消息内容及配置项即可，以下是使用示例代码：
-- -------------------- ---- -------
----------
-----
---- ---- ---
--------------- -------------- ---------- --------------------------------
---- ---- ---
--------------- ------------ ---------- --------------------------------
---- ---- ---
--------------- ----------- ---------- ---------------------------------
---- ---- ---
--------------- -------------- ---------- ---------------------------------
------
-----------
--------
------ ------- -
----- --------------
-
---------在示例代码中，我们通过传递不同的 type 值来显示不同类型的消息，也可以通过设置 props 的其它值来对消息进行自定义，例如：
<cbp-vue-toastr type="success" title="操作成功" message="数据已成功保存！" position="bottom-right" timeout="3000" close="true" ></cbp-vue-toastr>
在上面的代码中，我们通过设置 position、timeout、close 等 props 的值，对消息框进行了自定义设置。
props
cbp-vue-toastr 除了支持默认的 props 值外，也支持通过 props 来自定义消息框的配置，以下是可自定义的 props 列表：
| Props 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | 'success' | 消息类型，支持 success、error、info、warning |
| title | String | '' | 消息标题，默认为空 |
| message | String | '' | 消息内容，默认为空 |
| position | String | 'top-right' | 消息框位置，支持 top-left、top-right、bottom-left、bottom-right |
| timeout | Number | 3000 | 消息框自动关闭的延迟时间，单位为毫秒 |
| close | Boolean | false | 是否显示关闭按钮 |
除上述 props 外，cbp-vue-toastr 还支持通过 $toast.$emit() 方法直接调用插件，例如：
-- -------------------- ---- -------
------ ------- -
----- --------------
--------- -
------------------------- -
----- ----------
------ -------
-------- -----------
---
-
-在上面的代码中，我们通过调用 $toast.$emit('show', options) 方法，并传递 options 对象，来显示自定义的消息提醒框。
总结
cbp-vue-toastr 是一款十分实用的 Vue 消息通知插件，它支持多种不同类型的消息提示，还支持自定义消息框的配置，易于集成到 Vue 项目中。通过本文的介绍，相信大家已经能够对该插件有所了解，并在实际项目中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055da681e8991b448db63a