Message 訊息

訊息以命令式 API 顯示全域 toast 回饋。請以 <gk-message-provider> 包住應用（或各示範），再呼叫 gkMessage；可用 destroy() / destroyAll() 管理生命週期。與 Alert 不同，Message 會自行從佇列移除。

示範

基礎

觸發 gkMessage.info、success、warning、error。需要已連線的 gk-message-provider。

資訊成功警告錯誤

<gk-message-provider>
  <gk-button @click="() => gkMessage.info('資訊訊息')">資訊</gk-button>
  <gk-button @click="() => gkMessage.success('儲存成功')">成功</gk-button>
  <gk-button @click="() => gkMessage.warning('請檢查輸入內容')">警告</gk-button>
  <gk-button @click="() => gkMessage.error('發生錯誤')">錯誤</gk-button>
</gk-message-provider>

類型

類型：default、info、success、warning、error、loading。Loading 預設不會自動關閉；此示範會在 2 秒後 destroy()。

預設資訊成功警告錯誤載入中（2 秒）

<gk-message-provider>
  <gk-button @click="() => gkMessage.create('預設訊息')">預設</gk-button>
  <gk-button @click="() => gkMessage.info('資訊訊息')">資訊</gk-button>
  <gk-button @click="() => gkMessage.success('儲存成功')">成功</gk-button>
  <gk-button @click="() => gkMessage.warning('請檢查輸入內容')">警告</gk-button>
  <gk-button @click="() => gkMessage.error('發生錯誤')">錯誤</gk-button>
  <gk-button @click="() => {
    const h = gkMessage.loading('載入中…');
    window.setTimeout(() => h.destroy(), 2000);
  }">載入中（2 秒）</gk-button>
</gk-message-provider>

可關閉

單次呼叫傳入 { closable: true }（或在 provider 上設定 closable）。關閉會從佇列移除該訊息。

可關閉訊息

<gk-message-provider>
  <gk-button @click="() => gkMessage.info('可手動關閉', { closable: true, duration: 0 })">
    可關閉訊息
  </gk-button>
</gk-message-provider>

持續時間

可覆寫單次呼叫的持續時間。Provider 預設為 3000 ms；0 表示不自動關閉。

1 秒持續時間 0

<gk-message-provider>
  <gk-button @click="() => gkMessage.success('一秒後消失', { duration: 1000 })">
    1 秒
  </gk-button>
  <gk-button @click="() => gkMessage.warning('不會自動關閉', { duration: 0, closable: true })">
    持續時間 0
  </gk-button>
</gk-message-provider>

位置

僅在此示範的 provider 上設定 placement。可選：top、top-left、top-right、bottom、bottom-left、bottom-right。

右下角

<gk-message-provider placement="bottom-right">
  <gk-button @click="() => gkMessage.info('右下角位置')">
    右下角
  </gk-button>
</gk-message-provider>

全部銷毀

gkMessage.destroyAll() 會關閉作用中 provider 上的所有訊息。

資訊成功警告全部銷毀

<gk-message-provider>
  <gk-button @click="() => gkMessage.info('資訊訊息')">資訊</gk-button>
  <gk-button @click="() => gkMessage.success('儲存成功')">成功</gk-button>
  <gk-button @click="() => gkMessage.warning('請檢查輸入內容')">警告</gk-button>
  <gk-button @click="() => gkMessage.destroyAll()">全部銷毀</gk-button>
</gk-message-provider>

API

gk-message-provider Props

Prop	型別	預設值
placement	'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'	'top'
duration	number	3000
closable	boolean	false
keep-alive-on-hover	boolean	false
max	number	—

gk-message-provider Slots

名稱	說明
default	應用／頁面內容

gkMessage

從 @gk-ui/core 匯入。需要已連線的 <gk-message-provider>。

方法	簽名	說明
create	(content: string, options?: GkMessageOptions) => GkMessageReactive	通用建立
info	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'info'
success	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'success'
warning	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'warning'
error	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'error'
loading	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'loading'；預設 duration: 0
destroyAll	() => void	關閉作用中 provider 的全部訊息

GkMessageOptions： type、duration、closable、keepAliveOnHover、showIcon（預設 true）。

GkMessageReactive： { destroy: () => void }。

gk-message Props

Prop	型別	預設值
type	'default' | 'info' | 'success' | 'warning' | 'error' | 'loading'	'default'
content	string	''
closable	boolean	false
show-icon	boolean	true

gk-message Events

名稱	說明
gk-close	點擊關閉時觸發；bubbles；composed: true

CSS Parts (gk-message)

Part	說明
base	外層表面
icon	圖示／轉圈欄
content	文字內容
close	關閉按鈕