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

该服务可通过 Composition API 的 useToast 函数或 Options 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，该 aria-label 默认引用 locale API 的 aria.close 属性，您可以使用 closeButtonProps 来自定义元素并覆盖默认的 aria-label。

关闭按钮键盘支持

键	功能
enter	关闭消息。
空格	关闭消息。