Vant

日本語

繁體中文
简体中文
English

日本語

繁體中文
简体中文
English

Appearance

Notify メッセージ通知 - Vant 4

🔔 Notify メッセージ通知 ​

🎯 紹介 ​

Notify コンポーネントはページの上部にメッセージ通知を表示し、コンポーネント呼び出しと関数呼び出しの2つの方法をサポートします。ユーザーに重要な情報フィードバックを即座に提供します！

📦 導入 ​

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネントの登録を参照してください。

js
import { createApp } from'vue'; import { Notify } from'vant'; const app = createApp(); app.use(Notify);

🚀 関数呼び出し ​

Notify を使いやすくするため、Vant は一連の補助関数を提供しています。これらの補助関数を通じて、グローバルなメッセージ通知をすばやく呼び出すことができます。

例えば、showNotify 関数を使用すると、呼び出し後にページに対応する通知が直接レンダリングされます。

js
import { showNotify } from'vant'; showNotify({ message: '通知' });

🎯 コード例 ​

🔧 基本的な使い方 ​

最もシンプルなメッセージ通知です。ユーザーに重要なSMSを送るようなものです 📱

js
import { showNotify, closeNotify } from 'vant';

// 3秒後に自動的に閉じます。目覚まし時計のように正確です ⏰
showNotify('通知内容');

// 手動で閉じます。いつでもメッセージを消すことができます ✨
closeNotify();
html
<template>
  <van-cell-group>
    <van-cell is-link title="基本用法" @click="showBasicNotify" />
    <van-cell is-link title="手動で閉じる" @click="showManualNotify" />
  </van-cell-group>
</template>

<script setup>
import { showNotify, closeNotify } from 'vant';

const showBasicNotify = () => {
  showNotify('これは基本的な通知です 📢');
};

const showManualNotify = () => {
  showNotify({
    message: '任意の場所をクリックして閉じる',
    duration: 0, // 自動的に閉じない
  });
  
  // 3秒後に手動で閉じる
  setTimeout(() => {
    closeNotify();
  }, 3000);
};
</script>

🎨 通知の種類 ​

4種類の通知タイプがあります。交通信号のように明確でわかりやすいです 🚦

js
import { showNotify } from 'vant';

// プライマリ通知 - 青色の情報通知 💙
showNotify({ type: 'primary', message: 'プライマリ通知内容' });

// 成功通知 - 緑色の成功フィードバック 💚
showNotify({ type: 'success', message: '操作成功！' });

// 危険通知 - 赤色の警告情報 ❤️
showNotify({ type: 'danger', message: '操作失敗！' });

// 警告通知 - オレンジ色の注意情報 🧡
showNotify({ type: 'warning', message: '注意してください！' });
html
<template>
  <van-cell-group>
    <van-cell is-link title="プライマリ通知" @click="showPrimary" />
    <van-cell is-link title="成功通知" @click="showSuccess" />
    <van-cell is-link title="危険通知" @click="showDanger" />
    <van-cell is-link title="警告通知" @click="showWarning" />
  </van-cell-group>
</template>

<script setup>
import { showNotify } from 'vant';

const showPrimary = () => {
  showNotify({ type: 'primary', message: 'これはプライマリ通知です 💙' });
};

const showSuccess = () => {
  showNotify({ type: 'success', message: '操作成功です 🎉' });
};

const showDanger = () => {
  showNotify({ type: 'danger', message: 'エラーが発生しました ⚠️' });
};

const showWarning = () => {
  showNotify({ type: 'warning', message: '確認してください ⚡' });
};
</script>

🎨 カスタム通知 ​

通知をより個性的にしましょう。専用のメッセージカードをカスタマイズするようなものです 🎨

js
import { showNotify } from 'vant';

// カスタムカラー、専属スタイルを作成 🌈
showNotify({
  message: 'カスタムカラー通知',
  color: '#ad0000',
  background: '#ffe1e1',
});

// カスタム位置、下部から表示 ⬆️
showNotify({
  message: '下部から表示される通知',
  position: 'bottom',
});

// カスタム期間、すばやく表示 ⚡
showNotify({
  message: '1秒後に消えます',
  duration: 1000,
});
html
<template>
  <van-cell-group>
    <van-cell is-link title="カスタムカラー" @click="showCustomColor" />
    <van-cell is-link title="下部から表示" @click="showBottom" />
    <van-cell is-link title="カスタム期間" @click="showCustomDuration" />
  </van-cell-group>
</template>

<script setup>
import { showNotify } from 'vant';

const showCustomColor = () => {
  showNotify({
    message: 'ピンクテーマの通知 💗',
    color: '#fff',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  });
};

const showBottom = () => {
  showNotify({
    message: '下部から現れました 👋',
    position: 'bottom',
  });
};

const showCustomDuration = () => {
  showNotify({
    message: '1秒間だけ表示します ⚡',
    duration: 1000,
  });
};
</script>

🧩 Notify コンポーネントの使用 ​

より複雑な内容が必要な場合、コンポーネント呼び出しはブロックを組み立てるように柔軟です 🧩

html
<template>
  <div>
    <van-cell is-link title="コンポーネント呼び出し" @click="showComponentNotify" />
    
    <van-notify v-model:show="show" type="success">
      <van-icon name="bell" />
      カスタムコンテンツの通知 🔔
    </van-notify>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);

const showComponentNotify = () => {
  show.value = true;
  
  // 2秒後に自動的に閉じる
  setTimeout(() => {
    show.value = false;
  }, 2000);
};
</script>

📋 API ​

🔧 メソッド ​

Vant では以下の Notify に関連する補助関数がエクスポートされています：

メソッド名説明パラメータ戻り値
showNotifyページの上部に Notify を表示します。信号弾を発射するように 🚀NotifyOptions | stringnotify インスタンス
closeNotify現在表示されている Notify を閉じます。メッセージを静かに消します ✨-void
setNotifyDefaultOptionsデフォルトの設定を変更し、すべての showNotify 呼び出しに影響します ⚙️NotifyOptionsvoid
resetNotifyDefaultOptionsデフォルトの設定をリセットし、工場出荷時の設定に戻します 🔄-void

🎛️ NotifyOptions ​

showNotify などのメソッドを呼び出すとき、以下のオプションを渡すことができます：

パラメータ説明型デフォルト値
typeタイプ、primary success warning から選択可能、通知の視覚スタイルを決定 🎨NotifyTypedanger
message表示テキスト、\n による改行をサポート、メッセージの中核内容 📝string-
duration表示時間(ms)、0 の場合、notify は消えません ⏰number | string3000
zIndexコンポーネントの z-index 階層を固定値に設定します 📚number | string2000+
position表示位置、bottom から選択可能、メッセージの表示位置を制御 📍NotifyPositiontop
colorフォントカラー、文字をより目立たせます 🎨stringwhite
background背景色、視覚的な雰囲気を作り出します 🌈string-
classNameカスタムクラス名、個性的なスタイルを追加 🎭string | Array | object-
lockScroll背景のスクロールをロックするかどうか、ページのスクロールによる干渉を防ぎます 🔒booleanfalse
teleportマウント先のノードを指定、Teleport コンポーネントの to 属性 と同等 🎯string | Element-
onClickクリック時のコールバック関数、ユーザーの操作に反応 👆(event: MouseEvent): void-
onOpened完全に表示された後のコールバック関数、通知が完全に表示されたときにトリガー 🎪() => void-
onClose閉じるときのコールバック関数、通知が閉じるときにトリガー 👋() => void-

🎛️ プロパティ ​

Notify をコンポーネントとして呼び出す場合、以下のプロパティをサポートします：

パラメータ説明型デフォルト値
v-model:show通知を表示するかどうか、通知の表示状態を制御 👁️booleanfalse
typeタイプ、primary success warning から選択可能、通知の視覚スタイルを決定 🎨NotifyTypedanger
message表示テキスト、\n による改行をサポート、メッセージの中核内容 📝string-
z-indexコンポーネントの z-index 階層を固定値に設定します 📚number | string2000+
position表示位置、bottom から選択可能、メッセージの表示位置を制御 📍NotifyPositiontop
colorフォントカラー、文字をより目立たせます 🎨stringwhite
background背景色、視覚的な雰囲気を作り出します 🌈string-
class-nameカスタムクラス名、個性的なスタイルを追加 🎭string | Array | object-
lock-scroll背景のスクロールをロックするかどうか、ページのスクロールによる干渉を防ぎます 🔒booleanfalse
teleportマウント先のノードを指定、Teleport コンポーネントの to 属性 と同等 🎯string | Element-

🎪 イベント ​

Notify をコンポーネントとして呼び出す場合、以下のイベントをサポートします：

イベント名説明コールバック引数
clickクリック時のコールバック関数、ユーザーの操作に反応 👆event: MouseEvent
close閉じるときのコールバック関数、通知が閉じるときにトリガー 👋-
opened完全に表示された後のコールバック関数、通知が完全に表示されたときにトリガー 🎪-

🎰 スロット ​

Notify をコンポーネントとして呼び出す場合、以下のスロットをサポートします：

名前説明
defaultカスタムコンテンツ、アイコンやボタンなどの要素を追加可能 🧩

📝 型定義 ​

コンポーネントは以下の型定義をエクスポートします：

ts
import type {
  NotifyType,
  NotifyProps,
  NotifyOptions,
  NotifyPosition,
} from 'vant';

🎨 テーマカスタマイズ ​

🎛️ スタイル変数 ​

コンポーネントは以下の CSS 変数を提供しており、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネント を参照してください。

名前デフォルト値説明
--van-notify-text-colorvar(--van-white)文字の色 ✏️
--van-notify-paddingvar(--van-padding-xs) var(--van-padding-md)内側の余白 📦
--van-notify-font-sizevar(--van-font-size-md)フォントサイズ 📝
--van-notify-line-heightvar(--van-line-height-md)行の高さ 📐
--van-notify-primary-backgroundvar(--van-primary-color)プライマリ通知の背景色 💙
--van-notify-success-backgroundvar(--van-success-color)成功通知の背景色 💚
--van-notify-danger-backgroundvar(--van-danger-color)危険通知の背景色 ❤️
--van-notify-warning-backgroundvar(--van-warning-color)警告通知の背景色 🧡

よくある質問 ​

showNotify を参照するとコンパイルエラーが発生する？ ​

showNotify メソッドを参照する際に以下のエラーが発生した場合、プロジェクトで babel-plugin-import プラグインが使用されているため、コードが誤ってコンパイルされていることを示しています。

bash
These dependencies were not found: * vant/es/show-notify in ./src/xxx.js * vant/es/show-notify/style in ./src/xxx.js

Vant はバージョン 4.0 から babel-plugin-import プラグインをサポートしなくなりました。移行ガイド を参照して、このプラグインを削除してください。

📚 関連文書 ​

Vant に基づく企業向けモバイルソリューション

Copyright © 2025 siex.cn ｜ sitemap