📱 Popup ポップアップ

Popup ポップアップ - Vant 4

🎯 概要

ポップアップを表示するコンテナ。ダイアログや軽量通知などの表示に使用でき、複数のポップアップを重ねて表示できます 🎭

📦 導入

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

import { createApp } from 'vue';
import { Popup } from 'vant';

const app = createApp();
app.use(Popup);

🚀 コードデモ

🔧 基本用法

v-model:show で表示を制御します ✨

html

<van-cell is-link @click="showPopup">ポップアップを表示</van-cell>
<van-popup v-model:show="show" :style="{ padding: '64px' }">コンテンツ</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    
    // ポップアップを表示 🎬
    const showPopup = () => {
      show.value = true;
    };

    return {
      show,
      showPopup,
    };
  },
};

🧭 表示位置

position で表示位置を指定します。デフォルトは中央で、top・bottom・left・right を指定可能です 🎼

上下から表示する場合は幅が画面幅に一致し、高さは内容に依存します 📏
左右から表示する場合は幅・高さは指定せず、内容に依存します 📐

html

<van-cell-group>
  <van-cell is-link @click="showPopup('top')">上から表示</van-cell>
  <van-cell is-link @click="showPopup('bottom')">下から表示</van-cell>
  <van-cell is-link @click="showPopup('left')">左から表示</van-cell>
  <van-cell is-link @click="showPopup('right')">右から表示</van-cell>
</van-cell-group>

<van-popup
  v-model:show="show.top"
  position="top"
  :style="{ height: '30%' }"
/>
<van-popup
  v-model:show="show.bottom"
  position="bottom"
  :style="{ height: '30%' }"
/>
<van-popup
  v-model:show="show.left"
  position="left"
  :style="{ width: '30%', height: '100%' }"
/>
<van-popup
  v-model:show="show.right"
  position="right"
  :style="{ width: '30%', height: '100%' }"
/>

import { reactive } from 'vue';

export default {
  setup() {
    // 複数ポップアップの表示状態管理 🎯
    const show = reactive({
      top: false,
      bottom: false,
      left: false,
      right: false,
    });
    
    const showPopup = (position) => {
      show[position] = true;
    };

    return {
      show,
      showPopup,
    };
  },
};

❌ 閉じるアイコン

closeable で右上に閉じるアイコンを表示します。close-icon でアイコン、close-icon-position で位置を指定できます 🚪

html

<van-cell is-link @click="showPopup">閉じるアイコン</van-cell>
<van-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
/>

<!-- カスタムアイコン -->
<van-popup
  v-model:show="show"
  closeable
  close-icon="close"
  position="bottom"
  :style="{ height: '30%' }"
/>

<!-- アイコン位置 -->
<van-popup
  v-model:show="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '30%' }"
/>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    
    // 閉じるアイコン付きポップアップを表示 ❌
    const showPopup = () => {
      show.value = true;
    };

    return {
      show,
      showPopup,
    };
  },
};

🔘 角丸ポップアップ

round で角丸スタイルを適用します 🌙

html

<van-cell is-link @click="showPopup">角丸ポップアップ</van-cell>
<van-popup
  v-model:show="show"
  round
  position="bottom"
  :style="{ height: '30%' }"
/>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    
    // 角丸ポップアップを表示 🎨
    const showPopup = () => {
      show.value = true;
    };

    return {
      show,
      showPopup,
    };
  },
};

👆 クリックイベント

Popup は以下のクリックイベントをサポートします 🎮

click: ポップアップをクリック 📱
click-overlay: オーバーレイをクリック 🎭
click-close-icon: 閉じるアイコンをクリック ❌

html

<van-cell is-link @click="showPopup">クリックイベント</van-cell>
<van-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '30%', padding: '16px' }"
  @click="showToast('click')"
  @click-overlay="onClickOverlay"
  @click-close-icon="onClickCloseIcon"
>
  ポップアップをクリック
</van-popup>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const show = ref(false);
    
    // オーバーレイクリックのハンドラ 🎭
    const onClickOverlay = () => {
      showToast('click-overlay');
    };
    
    // 閉じるアインクリックのハンドラ ❌
    const onClickCloseIcon = () => {
      showToast('click-close-icon');
    };

    return {
      show,
      showToast,
      onClickOverlay,
      onClickCloseIcon,
    };
  },
};

📡 表示イベント

Popup の開閉に伴い以下のイベントが発火します ⏰

open: 開く（表示開始）📂
opened: 開いた後（アニメ終了）✨
close: 閉じる（非表示開始）📁
closed: 閉じた後（アニメ終了）🎭

html

<van-cell is-link @click="showPopup">表示イベント</van-cell>
<van-popup
  v-model:show="show"
  position="bottom"
  :style="{ height: '30%' }"
  @open="showToast('open')"
  @opened="showToast('opened')"
  @close="showToast('close')"
  @closed="showToast('closed')"
/>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const show = ref(false);
    
    // ポップアップ表示でイベントを確認 🎬
    const showPopup = () => {
      show.value = true;
    };

    return {
      show,
      showPopup,
      showToast,
    };
  },
};

🚀 マウント先の指定

デフォルトではコンポーネント直下にマウントされますが、teleport でマウント先を指定できます 🎯

html

<!-- body にマウント -->
<van-popup v-model:show="show" teleport="body" />

<!-- #app にマウント -->
<van-popup v-model:show="show" teleport="#app" />

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);

    return {
      show,
    };
  },
};

📋 API

🎛️ Props

パラメータ	説明	型	デフォルト値
v-model:show	ポップアップの表示状態	boolean	`false`
overlay	オーバーレイの表示	boolean	`true`
position	表示位置（`top` `bottom` `right` `left`）	string	`center`
overlay-class	オーバーレイのクラス名	string \| Array \| object	-
overlay-style	オーバーレイのスタイル	object	-
duration	アニメーション時間（秒）	number \| string	`0.3`
z-index	固定の z-index を設定	number \| string	`2000+`
round	角丸を有効化	boolean	`false`
lock-scroll	背景のスクロールをロック	boolean	`true`
lazy-render	表示時にノードをレンダリング	boolean	`true`
close-on-popstate	履歴戻り時に自動で閉じる	boolean	`true`
close-on-click-overlay	オーバーレイクリックで閉じる	boolean	`true`
closeable	閉じるアイコンを表示	boolean	`false`
close-icon	閉じるアイコン名/画像（Icon の name 相当）	string	`cross`
close-icon-position	閉じるアイコンの位置（`top-left` 等）	string	`top-right`
before-close	閉じる前のコールバック（`false` でキャンセル）	Function	-
icon-prefix	アイコンのクラス接頭辞（Icon の class-prefix 相当）	string	`van-icon`
transition	アニメーション名（transition の `name`）	string	-
transition-appear	初期表示時にトランジションを適用	boolean	`false`
teleport	マウント先（Teleport の to 相当）	string \| Element	-
safe-area-inset-top	上部セーフエリア対応	boolean	`false`
safe-area-inset-bottom	下部セーフエリア対応	boolean	`false`

🎪 Events

イベント名	説明	コールバックパラメータ
click	ポップアップをクリック 📱	event: MouseEvent
click-overlay	オーバーレイをクリック 🎭	event: MouseEvent
click-close-icon	閉じるアイコンをクリック ❌	event: MouseEvent
open	開く（表示開始）📂	-
close	閉じる（非表示開始）📁	-
opened	開いた後（アニメ終了）✨	-
closed	閉じた後（アニメ終了）🎭	-

🎨 Slots

名前	説明
default	コンテンツ（主要情報・操作） 📄
overlay	オーバーレイのカスタマイズ 🎭

🏷️ 型定義

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

import type {
  PopupProps,
  PopupPosition,
  PopupInstance,
  PopupThemeVars,
  PopupCloseIconPosition,
} from 'vant';

PopupInstance はコンポーネントインスタンスの型です：

import { ref } from 'vue';
import type { PopupInstance } from 'vant';

const popupRef = ref<PopupInstance>();

🎨 テーマのカスタマイズ

🎭 スタイル変数

以下の CSS 変数でスタイルをカスタマイズできます。使用方法は ConfigProvider を参照してください。

名前	デフォルト値	説明
--van-popup-background	var(--van-background-2)	背景色
--van-popup-transition	transform var(--van-duration-base)	トランジション
--van-popup-round-radius	16px	角丸半径
--van-popup-close-icon-size	22px	閉じるアイコンのサイズ
--van-popup-close-icon-color	var(--van-gray-5)	閉じるアイコンの色
--van-popup-close-icon-margin	16px	閉じるアイコンのマージン
--van-popup-close-icon-z-index	1	閉じるアイコンの z-index

📚 関連ドキュメント

🔗 関連コンポーネント

Overlay オーバーレイ - 背景操作の遮断 🎭
Dialog ダイアログ - 重要な確認 💬
ActionSheet アクションパネル - 下部から表示される選択パネル 📋
Toast トースト - 軽量フィードバック 🍞
Notify 通知 - 上部通知 📢
DropdownMenu ドロップダウンメニュー - スペース節約の選択メニュー 📝
Popover ポップオーバー - 軽量ポップアップ。簡潔なヒント表示 💭

📱 Popup ポップアップ ​

🎯 概要 ​

📦 導入 ​

🚀 コードデモ ​

🔧 基本用法 ​

🧭 表示位置 ​

❌ 閉じるアイコン ​

🔘 角丸ポップアップ ​

👆 クリックイベント ​

📡 表示イベント ​

🚀 マウント先の指定 ​

📋 API ​

🎛️ Props ​

🎪 Events ​

🎨 Slots ​

🏷️ 型定義 ​

🎨 テーマのカスタマイズ ​

🎭 スタイル変数 ​

📚 関連ドキュメント ​

🔗 関連コンポーネント ​

📱 Popup ポップアップ

🎯 概要

📦 導入

🚀 コードデモ

🔧 基本用法

🧭 表示位置

❌ 閉じるアイコン

🔘 角丸ポップアップ

👆 クリックイベント

📡 表示イベント

🚀 マウント先の指定

📋 API

🎛️ Props

🎪 Events

🎨 Slots

🏷️ 型定義

🎨 テーマのカスタマイズ

🎭 スタイル変数

📚 関連ドキュメント

🔗 関連コンポーネント