Alert 警告提示

靜態的語意警示條。四種類型、圖示、樸素樣式與可關閉。

警告提示

<template>
  <div class="demo-col" style="max-width: 520px; gap: 12px">
    <LhAlert type="info" title="館藏公告" show-icon>《溪山行旅圖》數位高畫質版已上線，歡迎觀賞。</LhAlert>
    <LhAlert type="success" title="採集完成" show-icon closable>120 幅宋畫高畫質採集已完成歸檔。</LhAlert>
    <LhAlert type="warning" title="校色偏差" show-icon plain closable>3 處色值偏離基準，建議復核。</LhAlert>
    <LhAlert type="danger" :title="titleText" closable :close-label="closeLabel">
      無圖示 + 自訂關閉按鈕無障礙名稱。
    </LhAlert>
    <LhAlert type="info" plain>純文字樸素樣式（plain），無標題。</LhAlert>
  </div>
</template>

<script>
export default {
  data: () => ({
    titleText: '審校駁回',
    closeLabel: '關閉此警示',
  }),
}
</script>

Props

屬性	說明	類型	預設值
type	語意類型	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	標題（也可用 title 插槽）	string	—
closable	是否可關閉	boolean	false
showIcon	是否顯示語意圖示	boolean	false
plain	是否淺色樸素樣式	boolean	false
closeLabel	關閉按鈕的無障礙名稱（未傳時取語言包 alert.close）	string	—
sx	sx 快速佈局屬性	—	—

Slots

插槽	說明
title	標題區（預設取 title prop）
default	正文描述