通知是開發(fā)者提升應(yīng)用程序互動(dòng)性和改善用戶體驗(yàn)的強(qiáng)大工具。通過利用通知，開發(fā)者可以在用戶與應(yīng)用程序互動(dòng)的同時(shí)，有效地向用戶傳達(dá)重要事件。

通知在應(yīng)用程序中起著至關(guān)重要的作用，可以及時(shí)通知用戶有關(guān)各種操作和事件的信息。它們可以用于通知用戶任務(wù)失敗、網(wǎng)絡(luò)中斷、操作成功、警告、錯(cuò)誤和重要信息。這些通知作為有價(jià)值的更新，確保用戶了解正在發(fā)生的事件以及他們需要采取的必要行動(dòng)。

為什么通知很重要？

通知無處不在，可以采取各種形式，包括電子郵件或短信通知，以及應(yīng)用內(nèi)通知，本文將重點(diǎn)介紹應(yīng)用內(nèi)通知。應(yīng)用內(nèi)通知在多種情況下都是有價(jià)值的工具，例如：

• 通知用戶驗(yàn)證錯(cuò)誤：應(yīng)用內(nèi)通知可以及時(shí)提醒用戶與應(yīng)用交互時(shí)可能遇到的任何驗(yàn)證錯(cuò)誤，確保他們知道需要關(guān)注的任何問題。

• 傳達(dá)成功、錯(cuò)誤或警告信息：應(yīng)用內(nèi)通知提供了一種方式，向用戶傳達(dá)關(guān)于他們操作結(jié)果的重要反饋。無論是確認(rèn)成功的操作，指示需要解決的錯(cuò)誤，還是提供警告，這些通知都能讓用戶了解他們操作的狀態(tài)。

• 處理網(wǎng)絡(luò)故障：在網(wǎng)絡(luò)故障發(fā)生時(shí)，應(yīng)用內(nèi)通知可以通知用戶有關(guān)臨時(shí)中斷的信息，使他們能夠了解情況并可能相應(yīng)地調(diào)整使用或期望。

• 提供進(jìn)度報(bào)告：應(yīng)用內(nèi)通知可以作為進(jìn)度指示器，讓用戶了解長時(shí)間處理或任務(wù)的狀態(tài)。通過顯示定期更新，用戶可以看到進(jìn)展情況，這有助于管理期望并提供安心感。

• 分享信息消息：應(yīng)用內(nèi)通知是向用戶傳達(dá)重要信息或更新的有效手段。無論是通知新功能、政策變更還是其他相關(guān)信息，這些通知都能確保用戶保持了解并與應(yīng)用保持互動(dòng)。

我們不會(huì)從頭開始開發(fā)一個(gè)彈出通知。相反，我們將利用vue-toastification庫。這個(gè)輕量級(jí)且可定制的庫提供了開箱即用的TypeScript支持和簡單的設(shè)置。

設(shè)置

本指南中的代碼是使用Vue.js版本3.3.2構(gòu)建和測試的，但它也應(yīng)該適用于其他版本的Vue.js。

要開始使用Vue.js，您可以使用命令npm init vue@latest創(chuàng)建一個(gè)新的Vue.js應(yīng)用程序，或者將其包含在您現(xiàn)有的Vue.js應(yīng)用程序中。

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

安裝

根據(jù)您喜歡的軟件包管理器，您可以使用以下命令在Vue.js中安裝vue-toastification。

npm add vue-toastification@next

//or 

yarn add vue-toastification@next

該命令將安裝vue-toastification在您的系統(tǒng)上運(yùn)行所需的依賴項(xiàng)。

要將vue-toastification集成到您的應(yīng)用程序中，請(qǐng)?jiān)趹?yīng)用程序的根目錄中找到main.js或main.ts文件。將下面的代碼片段包含在此文件中，因?yàn)樗悄腣ue.js應(yīng)用程序的入口點(diǎn)。在這里，您可以注冊庫并根據(jù)您的要求進(jìn)行配置。

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（創(chuàng)建通知）

我們將為成功、錯(cuò)誤、警告、信息和普通提示工具函數(shù)聲明各種函數(shù)，以便我們可以輕松地將它們導(dǎo)入需要它們的組件并在那里使用。這比一遍又一遍地導(dǎo)入相同的東西更有幫助。它將使我們的代碼更清晰，避免重復(fù)，并使其更易于維護(hù)。

在你的src目錄下，創(chuàng)建一個(gè)名為util的文件夾，然后在其中創(chuàng)建一個(gè)名為toast.ts的文件，你可以在這個(gè)文件中編寫下面展示的代碼。

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);
}

現(xiàn)在在我們的Vuejs組件中，我們可以明確地導(dǎo)入我們需要的toast通知函數(shù)，并傳遞我們想要toast的消息。

為了測試一下，轉(zhuǎn)到App.vue組件并按照下面的方式從util中導(dǎo)入success函數(shù)。

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

onMounted( () => {

  normalToast("Normal toast message")

  success("Success toast message")
})
</script>

當(dāng)我們的組件被掛載時(shí)，我們可以在應(yīng)用程序中看到彈出通知。在實(shí)際項(xiàng)目中，這種用例可能是不必要的，因?yàn)槲覀兿Ｍ谔囟l件下通知彈出，而不是在組件被掛載時(shí)。

自定義提示信息

您可以根據(jù)個(gè)人喜好和使用情況自定義提示信息。我們還可以添加一些額外的自定義選項(xiàng)，例如設(shè)置提示信息的超時(shí)時(shí)間、通過編程方式關(guān)閉提示信息等。

設(shè)置提示的超時(shí)時(shí)間

我們可以設(shè)置烤面包通知在頁面上停留的時(shí)間，或者允許用戶通過點(diǎn)擊X圖標(biāo)來關(guān)閉它們。根據(jù)您的使用情況，您可以按照下面所示進(jìn)行設(shè)置。

允許用戶關(guān)閉彈出消息

// 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秒超時(shí)后取消彈出的提示

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

有許多配置選項(xiàng)可以自定義。查看Vuejs Toastification以獲取所有可能的自定義選項(xiàng)。

結(jié)束

由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時(shí)，如果您想獲取更多前端技術(shù)的知識(shí)，歡迎關(guān)注我，您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容，敬請(qǐng)期待。