Message (訊息)

訊息元件用於顯示內嵌訊息。

匯入 #


import Message from 'primevue/message';

基本 #

訊息元件需要內容來顯示。


<Message>Message Content</Message>

嚴重性 #

severity 選項指定訊息的類型。


<Message severity="success">Success Message</Message>
<Message severity="info">Info Message</Message>
<Message severity="warn">Warn Message</Message>
<Message severity="error">Error Message</Message>
<Message severity="secondary">Secondary Message</Message>
<Message severity="contrast">Contrast Message</Message>

圖示 #

可以使用圖示屬性和 icon 插槽來自訂訊息的圖示


<Message severity="info" icon="pi pi-send">Info Message</Message>
<Message severity="success">
    <template #icon>
        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
    </template>
    <span class="ml-2">How may I help you?</span>
</Message>

外框 #

將 variant 值設定為 outlined 以顯示具有邊框且沒有背景的訊息。


<Message severity="success" variant="outlined">Success Message</Message>
<Message severity="info" variant="outlined">Info Message</Message>
<Message severity="warn" variant="outlined">Warn Message</Message>
<Message severity="error" variant="outlined">Error Message</Message>
<Message severity="secondary" variant="outlined">Secondary Message</Message>
<Message severity="contrast" variant="outlined">Contrast Message</Message>

簡單 #

將 variant 值設定為 simple 以顯示沒有邊框、背景和內邊距的訊息。


<Message severity="success" variant="simple">Success Message</Message>
<Message severity="info" variant="simple">Info Message</Message>
<Message severity="warn" variant="simple">Warn Message</Message>
<Message severity="error" variant="simple">Error Message</Message>
<Message severity="secondary" variant="simple">Secondary Message</Message>
<Message severity="contrast" variant="simple">Contrast Message</Message>

尺寸 #

訊息元件提供 small 和 large 尺寸作為基本尺寸的替代方案。


<Message size="small" icon="pi pi-send">Small Message</Message>
<Message icon="pi pi-user">Normal Message</Message>
<Message size="large" icon="pi pi-check">Large Message</Message>

表單 #

表單中的驗證錯誤會以 error 嚴重性顯示。


<Message v-if="!username || !email" severity="error" icon="pi pi-times-circle" class="mb-2">Validation error</Message>
<Message v-if="username && email" severity="success" icon="pi pi-times-circle" class="mb-2">Form is valid</Message>
<div class="flex flex-col gap-1">
    <InputText v-model="username" placeholder="Username" aria-label="username" :invalid="!username" />
    <Message v-if="!username" severity="error" variant="simple" size="small">Username is required</Message>
</div>
<div class="flex flex-col gap-1">
    <InputText v-model="email" placeholder="Email" aria-label="email" :invalid="!email" />
    <Message v-if="!email" severity="error" variant="simple" size="small">Email is not valid</Message>
</div>

動態 #

可以使用標準的 v-for 指令顯示多個訊息。


<Button label="Show" @click="addMessages()" />
<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
<transition-group name="p-message" tag="div" class="flex flex-col">
    <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity" class="mt-4">{{ msg.content }}</Message>
</transition-group>

可關閉 #

啟用 closable 選項以顯示可移除訊息的圖示。


<Message closable>Closable Message</Message>

生命週期 #

可以透過以毫秒為單位定義 life 來讓訊息自動消失。


<Button label="Show" @click="showMessage" :disabled="visible" class="mb-4" />
<Message v-if="visible" severity="success" :life="3000">Auto Disappear Message</Message>

協助工具 #

螢幕閱讀器

訊息元件使用 alert 角色，該角色隱式定義 aria-live 為「assertive」，aria-atomic 為「true」。由於任何屬性都會傳遞到根元素，因此屬性 (例如 aria-labelledby 和 aria-label) 也可以選擇性使用。

關閉元素是一個 button，其 aria-label 預設會參照 locale API 的 aria.close 屬性，您可以使用 closeButtonProps 來客製化元素並覆寫預設的 aria-label。

關閉按鈕鍵盤支援

按鍵	功能
Enter	關閉訊息。
空白鍵	關閉訊息。