Notify 是一個 Quasar 插件，可以向使用者顯示動畫訊息（浮動在頁面中的所有內容之上），以通知的形式呈現。它們對於提醒使用者事件非常有用，甚至可以透過動作與使用者互動。也稱為 toast 或 snackbar。
// quasar.config file
return {
framework: {
plugins: [
'Notify'
],
config: {
notify: /* look at QuasarConfOptions from the API card */
}
}
}用法
基本
import { Notify } from 'quasar'
Notify.create('Danger, Will Robinson! Danger!')
// or with a config object:
Notify.create({
message: 'Danger, Will Robinson! Danger!'
})import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.notify('Message')
// or with a config object:
$q.notify({...})
}提示
如果您定義任何動作，當使用者選擇動作時，通知將自動關閉。
帶有標題
帶有圖示、頭像或旋轉圖示
帶有動作
多行
定位
提示
如需選項的完整列表，請查看 API 章節。
群組
每個通知都有一個底層的唯一群組，該群組由訊息 + 標題 + multiLine + 動作標籤 + 位置計算得出。當觸發多個具有相同群組的通知時，不會顯示所有通知並淹沒視圖，而只會在螢幕上保留第一個通知以及徽章。徽章內容表示自第一個通知出現在螢幕上以來，已觸發相同通知（且位置相同）的次數。
但是，如果您希望停用此行為，請指定 group: false。在下面的範例中，第一個按鈕每次點擊都會觸發相同的通知兩次。第二個按鈕已停用群組。但是，第三個按鈕具有自訂群組名稱，因此每個後續通知都會取代舊通知並遞增徽章編號。
逾時進度
如果您希望，有一種方法可以告訴使用者通知何時會從螢幕上消失。這適用於 timeout 未設定為 0 的情況。
可更新的通知
如果您有正在進行的程序，並且想要告知使用者其進度，而不會阻止他目前正在執行的操作，那麼您可以產生可更新的通知。同時顯示旋轉圖示也很有用。
請注意，在下面的範例中，我們明確設定了“group: false”（因為只有非群組通知可以更新）和“timeout: 0”（因為我們希望完全控制何時關閉通知）。
預定義類型
有四種預定義的類型可以直接使用：“positive”、“negative”、“warning” 和 “info”
此外，您可以註冊自己的類型，甚至覆寫預定義的類型。執行此操作的最佳位置是在 @quasar/app-vite Boot File 或 @quasar/app-webpack Boot File 中。
import { Notify } from 'quasar'
Notify.registerType('my-notif', {
icon: 'announcement',
progress: true,
color: 'brown',
textColor: 'white',
classes: 'glossy'
})使用 HTML
如果您指定 html: true 屬性，則可以在訊息中使用 HTML。請注意，這可能會導致 XSS 攻擊，因此請確保自行清理訊息。
設定屬性
您可以透過設定 attrs 物件屬性，在通知本身上設定自訂 HTML 屬性。對於個別通知動作，您可以像任何其他屬性一樣直接傳遞它們。
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.notify({
// ...
attrs: {
// for the notification itself:
role: 'alertdialog'
},
actions: [
{
icon: 'close',
// for individual action (button):
'aria-label': 'Dismiss'
}
]
})
}以程式方式關閉
通知的目的是僅由使用者關閉，但在特殊情況下，您可以透過程式方式關閉。當您設定無限逾時 (0) 時，這尤其有用。
const dismiss = $q.notify({...})
...
dismiss()設定預設值
有兩種設定將套用於所有通知的預設組態的方法：透過 quasar.config 檔案 > framework > config > notify 物件（請參閱安裝章節）或以程式方式（請參閱下文）。
我們將說明透過 @quasar/app-vite Boot File 或 @quasar/app-webpack Boot File 設定預設值（在程式碼中的任何位置工作方式相同，但啟動檔案可確保在您的應用程式啟動之前執行此操作）
首先，我們建立啟動檔案。我們將其命名為 “notify-defaults.js”。
$ quasar new boot notify-defaults [--format ts]將建立的 notify-defaults.js 檔案新增至 /quasar.config 檔案中的 boot 陣列
module.exports = function (ctx) {
return {
// ...
boot: ['notify-defaults'],
// ...
}然後，我們編輯新建立的 /src/boot/notify-defaults.js
import { Notify } from 'quasar'
Notify.setDefaults({
position: 'top-right',
timeout: 2500,
textColor: 'white',
actions: [{ icon: 'close', color: 'white' }]
})警告
您只能透過此方法設定預設 actions。在 /quasar.config 檔案中指定帶有處理常式的 actions 無法且將不會運作。
我們也可以在某些 Vue 檔案中設定預設值
import { useQuasar } from 'quasar'
setup () {
const $q = useQuasar()
$q.notify.setDefaults({
position: 'top-right',
timeout: 2500,
textColor: 'white',
actions: [{ icon: 'close', color: 'white' }]
})
}