Message 全域輕提示

全域輕量回饋條，掛在頁面頂部。LhMessage.success('已儲存') 即用即走，loading 類型需手動關閉。

全域輕提示

<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="showLoading">載入中</LhButton>
      <LhButton @click="showClose">帶關閉按鈕</LhButton>
      <LhButton @click="closeAll">全部關閉</LhButton>
    </div>
    <p class="demo-note">LhMessage.success('已儲存') 是最常用形態；loading 類型需手動關閉。</p>
  </div>
</template>

<script>
export default {
  methods: {
    show(type) {
      LhMessage[type]('這是一條 ' + type + ' 提示')
    },
    showLoading() {
      LhMessage.loading('正在儲存…')
    },
    showClose() {
      LhMessage({ content: '可手動關閉的提示', showClose: true })
    },
    closeAll() {
      LhMessage.closeAll()
    },
  },
}
</script>

服務 API

LhMessage('普通提示')                    // 預設 info
LhMessage.success('已儲存')              // info / success / warning / danger / loading
LhMessage({ content: '可關閉', showClose: true, closeLabel: '知道了' })
LhMessage.closeAll()                     // 關閉全部

Message Props

屬性	說明	類型	預設值
content	提示內容	string	—
type	類型	'info' \| 'success' \| 'warning' \| 'danger' \| 'loading'	'info'
showClose	是否顯示關閉按鈕	boolean	false
closeLabel	關閉按鈕的無障礙名稱（未傳時取語言包 message.close）	string	—
sx	sx 快速佈局屬性	—	—

提示

loading 類型不會自動關閉，需配合業務結束後 LhMessage.closeAll() 或自行持有控制代碼。