在前端开发中，Toast 作为一种用户提示的方式，经常被使用。而 vue-toast-plugin 就是一款可以在 Vue.js 中方便使用 Toast 的插件。本文将会详细介绍如何安装和使用 vue-toast-plugin。
安装
安装 vue-toast-plugin 非常简单，你只需要在你的项目中使用 npm 或者 yarn 安装即可。
npm install vue-toast-plugin # 或者 yarn add vue-toast-plugin
引入
在 main.js 文件中引入 vue-toast-plugin。
import Vue from 'vue' import ToastPlugin from 'vue-toast-plugin' import 'vue-toast-plugin/dist/style.css' Vue.use(ToastPlugin)
以上代码中，我们不仅引入了 vue-toast-plugin，还使用 Vue.use() 方法将插件注册到全局。
使用
在 Vue 组件中，通过 $toast 对象可以调用 Toast 方法。
this.$toast.open('Toast 文本')使用 open() 函数可以弹出 Toast，你也可以传入一些参数来定制 Toast。
this.$toast.open({
message: 'Toast 文本',
type: 'success',
position: 'top',
duration: 2000
})以上代码中，message 参数表示 Toast 文本，type 参数表示 Toast 类型，可以是 success，info，warning 或者 error，position 参数表示 Toast 的位置，可以是 top，middle 或者 bottom，duration 参数表示 Toast 的显示时间。
示例代码
-- -------------------- ---- -------
----------
------- ------------------------ -----------
-----------
--------
------ ------- -
-------- -
----------- -
------------------
-------- ------- ------
----- ----------
--------- ------
--------- ----
--
-
-
-
---------总结
通过本文的介绍，你应该已经会使用 vue-toast-plugin 了。在实际开发中，Toast 是一个非常常用的组件，它可以对用户进行非常友好的提示。而 vue-toast-plugin 提供了一种便捷的方式来使用 Toast，可以让你更加高效地完成你的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f681e8991b448e0b7e