如何在VueJS应用程序中设置Toast通知

通知是开发者提升应用程序互动性和改善用户体验的强大工具。通过利用通知，开发者可以在用户与应用程序互动的同时，有效地向用户传达重要事件。

通知在应用程序中起着至关重要的作用，可以及时通知用户有关各种操作和事件的信息。它们可以用于通知用户任务失败、网络中断、操作成功、警告、错误和重要信息。这些通知作为有价值的更新，确保用户了解正在发生的事件以及他们需要采取的必要行动。

为什么通知很重要？

通知无处不在，可以采取各种形式，包括电子邮件或短信通知，以及应用内通知，本文将重点介绍应用内通知。应用内通知在多种情况下都是有价值的工具，例如：

• 通知用户验证错误：应用内通知可以及时提醒用户与应用交互时可能遇到的任何验证错误，确保他们知道需要关注的任何问题。

• 传达成功、错误或警告信息：应用内通知提供了一种方式，向用户传达关于他们操作结果的重要反馈。无论是确认成功的操作，指示需要解决的错误，还是提供警告，这些通知都能让用户了解他们操作的状态。

• 处理网络故障：在网络故障发生时，应用内通知可以通知用户有关临时中断的信息，使他们能够了解情况并可能相应地调整使用或期望。

• 提供进度报告：应用内通知可以作为进度指示器，让用户了解长时间处理或任务的状态。通过显示定期更新，用户可以看到进展情况，这有助于管理期望并提供安心感。

• 分享信息消息：应用内通知是向用户传达重要信息或更新的有效手段。无论是通知新功能、政策变更还是其他相关信息，这些通知都能确保用户保持了解并与应用保持互动。

我们不会从头开始开发一个弹出通知。相反，我们将利用vue-toastification库。这个轻量级且可定制的库提供了开箱即用的TypeScript支持和简单的设置。

设置

本指南中的代码是使用Vue.js版本3.3.2构建和测试的，但它也应该适用于其他版本的Vue.js。

要开始使用Vue.js，您可以使用命令npm init vue@latest创建一个新的Vue.js应用程序，或者将其包含在您现有的Vue.js应用程序中。

注意：确保您已安装 Node.js 版本 16.0 或更高版本。

安装

根据您喜欢的软件包管理器，您可以使用以下命令在Vue.js中安装vue-toastification。

npm add vue-toastification@next//or yarn add vue-toastification@next

该命令将安装vue-toastification在您的系统上运行所需的依赖项。

要将vue-toastification集成到您的应用程序中，请在应用程序的根目录中找到main.js或main.ts文件。将下面的代码片段包含在此文件中，因为它是您的Vue.js应用程序的入口点。在这里，您可以注册库并根据您的要求进行配置。

import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
//import the Toast library here
import Toast from "vue-toastification"
import "vue-toastification/dist/index.css";import App from './App.vue'
import router from './router'const ToastOptions = {// your default options goes here
};const app = createApp(App)app.use(createPinia())
app.use(router)
//register the Toast plugin for global use in the application.
app.use(Toast, ToastOptions)app.mount('#app')

Creating toasts（创建通知）

我们将为成功、错误、警告、信息和普通提示工具函数声明各种函数，以便我们可以轻松地将它们导入需要它们的组件并在那里使用。这比一遍又一遍地导入相同的东西更有帮助。它将使我们的代码更清晰，避免重复，并使其更易于维护。

在你的src目录下，创建一个名为util的文件夹，然后在其中创建一个名为toast.ts的文件，你可以在这个文件中编写下面展示的代码。

import { useToast } from "vue-toastification";
import type { ToastID } from "vue-toastification/dist/types/types";const toast = useToast();
const defaultToastMessage = "Toastification is awesome";export function normalToast(message: string): ToastID {if (!message) {return toast(defaultToastMessage);}return toast(message);
}export function success(message: string): ToastID {if (!message) {return toast(defaultToastMessage);}return toast.success(message);
}export function warning(message: string): ToastID {if (!message) {return toast(defaultToastMessage);}return toast.warning(message);
}export function error(message: string): ToastID {if (!message) {return toast(defaultToastMessage);}return toast.error(message);
}export function info(message: string): ToastID {if (!message) {return toast(defaultToastMessage);}return toast.info(message);
}

现在在我们的Vuejs组件中，我们可以明确地导入我们需要的toast通知函数，并传递我们想要toast的消息。

为了测试一下，转到App.vue组件并按照下面的方式从util中导入success函数。

<script setup lang="ts">
import { normalToast , success } from "@/utils/toast"
import { onMounted } from 'vue';onMounted( () => {normalToast("Normal toast message")success("Success toast message")
})
</script>

当我们的组件被挂载时，我们可以在应用程序中看到弹出通知。在实际项目中，这种用例可能是不必要的，因为我们希望在特定条件下通知弹出，而不是在组件被挂载时。

自定义提示信息

您可以根据个人喜好和使用情况自定义提示信息。我们还可以添加一些额外的自定义选项，例如设置提示信息的超时时间、通过编程方式关闭提示信息等。

设置提示的超时时间

我们可以设置烤面包通知在页面上停留的时间，或者允许用户通过点击X图标来关闭它们。根据您的使用情况，您可以按照下面所示进行设置。

允许用户关闭弹出消息

// allow the user to dismiss the message by cling the x icon on the toast
export function success(message: string): ToastID {if (!message) {return toast(defaultToastMessage);}return toast.success(message, {timeout: false});
}

在X秒超时后取消弹出的提示

// dismiss the toast after 3 seconds
export function success(message: string): ToastID {if (!message) {return toast(defaultToastMessage);}return toast.success(message, {timeout: 3000);
}

有许多配置选项可以自定义。查看Vuejs Toastification以获取所有可能的自定义选项。

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。