Vue 3 Toastify是一個給Vue.js應用程式提供訊息通知功能的函式庫。它可以幫助您建立和顯示輕量級的訊息提示。

介紹

官網
https://vue3-toastify.js-bridge.com/get-started/introduction.html

容易客製化、多種API方法、進度條顯示、支援html字串、可選擇動畫...等

安裝

npm install --save vue3-toastify

典型範例

（單一組件內）

<template>
  <div>
    <button @click="notify">Notify !</button>
  </div>
</template>

<script>
import { toast } from 'vue3-toastify'; // 引用
import 'vue3-toastify/dist/index.css'; // 官方

export default {
   name: "App",
   setup() {
    const notify = () => {
      toast("Wow so easy !", {
        autoClose: 1000,
      }); // ToastOptions
    }
    return { notify };
   }
};
</script>

若需要設定/調整全域設定，可以在main.js

import Vue3Toasity, { toast } from 'vue3-toastify';

app.use(Vue3Toastify, {
  autoClose: 3000, //自動關閉時間
  position: toast.POSITION.TOP_CENTER //提示窗位置
});

這樣在組件內，不用設定options，就可以吃到main.js所設定的

參數

因為官方文件提供的蠻詳細的，也提供每一種參數設定的變化可以讓你在網站先預覽

前往 >> 官方範例

所以我這邊就不一一說明，大家可以根據專案情況使用，以下只先說明比較常用的設定

圖示

有時候專案上的需求時，當送出API時，要通知使用者「送出成功 或 送出失敗...等等」這時候就需要一些圖示在提醒窗的前面

而官方提供不同類型的通知（toast.info、toast.error、toast.success、toast.warning），使用方式為

<template>
    <button @click="notify" class="border border-gray-600">
      點我會打開 Notify
    </button>
</template>

<script setup>
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

const notify = () => {
  toast.info('Hello!!'); // same as toast('Hello!!', { type: 'info' });
  toast.error('Hello!!');
  toast.success('Hello!!');
  toast.success('Hello!!', {
    theme: 'colored',
    position: toast.POSITION.TOP_LEFT,
  });
  toast.warn('Hello!!', {
    position: toast.POSITION.TOP_LEFT,
  });
  toast.warn('Hello!!', {
    theme: 'dark',
    position: toast.POSITION.TOP_LEFT,
  });
};
</script>

Demo網址：https://hahasister-ironman-project.netlify.app/#/Toastify

那明天再見拉～