在现代的Web开发中，前端开发无疑是一个非常重要的角色。前端开发对一款产品的外观、交互和用户体验有着重要的影响。为了更好地开发前端，现代的前端开发通常都使用一些工具和框架来辅助工作，其中NPM 包是不可或缺的一部分。
Toast-for-vue 是一个NPM包，主要用于vue应用的toast提示。toast提示是比较通用的UI交互形式，用于在页面上方或下方展示一段短暂的提示信息，比如登录成功、操作失败等。本篇文章将为大家详细介绍 Toast-for-vue 的使用方法。
安装
首先，我们需要在项目中安装 Toast-for-vue 这个NPM包。在终端中输入以下命令：
npm install toast-for-vue
安装完成后，可以在项目文件中的 node_modules 中看到安装的包。
引用
安装完成后，需要引入 Toast-for-vue 这个包，才能在我们的vue中使用。
import Vue from 'vue' import Toasted from 'toast-for-vue' Vue.use(Toasted)
这段代码中，首先我们使用import引入Toast-for-vue 这个包，引入之后我们需要将其注册为 Vue 的插件。Vue.use()可以实现这个功能。
如果使用原始的toast，可以通过以下方式：
this.$toast("您已成功登录");Options
如果你想使用 Toast-for-vue 所提供的各种选项，可以使用如下方式直接传入选项。
Vue.use(Toasted, {
position: 'bottom-center',
duration: 2000,
type: 'info',
icon: "fas fa-info-circle"
})Toast-for-vue 提供的选项如下：
position: toast提示的位置，默认是 'bottom-right'，可以设置的值包括： 'bottom-right', 'bottom-left', 'top-right', 'top-left', 'top-center', 'bottom-center'。duration: toast提示的显示时间，默认是1500毫秒（1.5秒）。type: toast提示的类型，默认为 'success'，可以设置的值包括： 'success', 'info', 'error', 'warn'。icon: toast提示中图标的类型。
示例代码
下面是一段使用 Toast-for-vue 实现toast提示的示例代码。它使用 Vue.js 的组件在页面中实现一个按钮和一个输入框。当点击按钮时，如果输入框是空的，会弹出一段错误的Toast提示；如果输入框有内容，会弹出一段成功的Toast提示。
-- -------------------- ---- -------
----------
-----
------ ----------------- ---------------------
------- -------------------------------------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
-------- --
-
--
-------- -
----------- -
-- ------------- --- --- -
-----------------------------
- ---- -
----------------------------------------------
-
-
-
-
---------以上代码使用 v-model 绑定了一个输入框，当用户输入文本时，可以通过 button 元素的 @click 事件来触发 showToast() 函数，该函数会根据输入框中的内容，显示不同类型的 Toast 提示。
总结
本文介绍了如何使用 Toast-for-vue 完成toast提示功能。通过使用Toast-for-vue，我们可以更轻松地实现各种提示功能，并且可以通过选项更好地控制提示的显示方式。Toast-for-vue 是一个十分优秀的 NPM 包，它的使用可以帮助我们更好地完成前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c1181e8991b448d9b18