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() を呼ぶか、自身でハンドルを保持してください。