Toast（快顯訊息）

Toast 用於在覆蓋層中顯示訊息。

導入 #


import Toast from 'primevue/toast';

Toast 服務 #

Toast 元件透過需要安裝為應用程式外掛程式的 ToastService 來控制。


import {createApp} from 'vue';
import ToastService from 'primevue/toastservice';

const app = createApp(App);
app.use(ToastService);

該服務可透過組合式 API 的 useToast 函式或選擇式 API 的應用程式的 $toast 屬性來使用。


import { useToast } from 'primevue/usetoast';

const toast = useToast();

基本 #

Toast 的理想位置是主應用程式範本，以便應用程式中的任何元件都可以使用它。單一訊息由 Message 介面表示，該介面定義嚴重性、摘要和詳細資訊等屬性。


<Toast />
<Button label="Show" @click="show()" />

嚴重性 #

severity 選項指定訊息的類型。


<Toast />
<Button label="Success" severity="success" @click="showSuccess" />
<Button label="Info" severity="info" @click="showInfo" />
<Button label="Warn" severity="warn" @click="showWarn" />
<Button label="Error" severity="danger" @click="showError" />
<Button label="Secondary" severity="secondary" @click="showSecondary" />
<Button label="Contrast" severity="contrast" @click="showContrast" />

位置 #

透過比對 group 鍵，可以將訊息定向到特定的 Toast 元件，而位置則透過 position 自訂。


<Toast position="top-left" group="tl" />
<Toast position="bottom-left" group="bl" />
<Toast position="bottom-right" group="br" />

<Button label="Top Left" @click="showTopLeft" />
<Button label="Bottom Left" @click="showBottomLeft" />
<Button label="Bottom Right" @click="showBottomRight" />

多個 #

透過將陣列傳遞給 show 方法來顯示多個訊息。


<Toast />
<Button label="Multiple" @click="showMultiple()" />

黏性 #

訊息會在 life 選項中定義的毫秒數後消失。省略 life 選項以使訊息保持黏性。


<Toast />
<Button @click="showSticky" label="Sticky" />
<Button label="Clear" severity="secondary" @click="clear()" />

範本 #

訊息內的自訂內容使用 message 範本定義。


<Toast position="bottom-center" group="bc" @close="onClose">
    <template #message="slotProps">
        <div class="flex flex-col items-start flex-auto">
            <div class="flex items-center gap-2">
                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                <span class="font-bold">Amy Elsner</span>
            </div>
            <div class="font-medium text-lg my-4">{{ slotProps.message.summary }}</div>
            <Button size="small" label="Reply" severity="success" @click="onReply()"></Button>
        </div>
    </template>
</Toast>
<Button @click="showTemplate" label="View" />

無頭 #

透過定義 container 插槽來啟用無頭模式，這讓您可以實作整個 toast UI 而不是預設元素。


<Toast position="top-center" group="headless" @close="visible = false">
    <template #container="{ message, closeCallback }">
        <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
            <div class="flex items-center gap-5">
                <i class="pi pi-cloud-upload text-white dark:text-black text-2xl"></i>
                <span class="font-bold text-base text-white dark:text-black">{{ message.summary }}</span>
            </div>
            <div class="flex flex-col gap-2">
                <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
                <label class="text-sm font-bold text-white dark:text-black">{{ progress }}% uploaded</label>
            </div>
            <div class="flex gap-4 mb-4 justify-end">
                <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
                <Button label="Cancel" size="small" @click="closeCallback"></Button>
            </div>
        </section>
    </template>
</Toast>
<Button @click="show" label="View" />

輔助功能 #

螢幕閱讀器

Toast 元件使用 alert 角色，它隱式定義 aria-live 為 "assertive" 和 aria-atomic 為 "true"。

關閉元素是一個帶有 aria-label 的 button，預設情況下，它會參考 locale API 的 aria.close 屬性，您可以使用 closeButtonProps 自訂元素並覆寫預設的 aria-label。

關閉按鈕鍵盤支援

按鍵	功能
enter	關閉訊息。
space	關閉訊息。