Notification 通知

右上角（可設定四角）的卡片式通知，適合流程節點類的長回饋。

通知提醒

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton @click="show('info')">資訊</LhButton>
      <LhButton type="primary" @click="show('success')">成功</LhButton>
      <LhButton type="warning" @click="show('warning')">警告</LhButton>
      <LhButton type="danger" @click="show('danger')">危險</LhButton>
      <LhButton @click="showClickable">可點選卡片</LhButton>
      <LhButton @click="closeAll">全部關閉</LhButton>
    </div>
    <p class="demo-note">LhNotification.success({ title, content })；傳入 onClick 後卡片可點選。</p>
  </div>
</template>

<script>
export default {
  methods: {
    show(type) {
      LhNotification[type]({
        title: type + ' 通知',
        content: '《溪山行旅圖》數位化流程節點已更新。',
        showClose: true,
      })
    },
    showClickable() {
      LhNotification.info({
        title: '點我試試',
        content: '傳入 onClick 後整張卡片可點選。',
        onClick() {
          LhMessage.success('卡片被點選了')
        },
      })
    },
    closeAll() {
      LhNotification.closeAll()
    },
  },
}
</script>

服務 API

LhNotification.success({ title: '採集完成', content: '120 幅已歸檔' })
// info / success / warning / danger，第二個參數為 options
LhNotification.info({ title: '點選我', content: '...', onClick: () => {} })
LhNotification.closeAll()

Notification Props

屬性	說明	類型	預設值
type	類型	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	標題	string	—
content	正文	string	—
showClose	是否顯示關閉按鈕	boolean	false
closeLabel	關閉按鈕的無障礙名稱（未傳時取語言包 notification.close）	string	—
onClick	傳入後卡片可點選	() => void	—
sx	sx 快速佈局屬性	—	—

提示

通知彈出位置（position：top-right / top-left / bottom-right / bottom-left）在 openNotification 的 options 中設定，預設右上角。