Vant

日本語

繁體中文
简体中文
English

日本語

繁體中文
简体中文
English

Appearance

ShareSheet 共有パネル - Vant 4

📤 ShareSheet 共有パネル ​

🎯 紹介 ​

下部から表示される共有パネル。各共有チャネルの操作ボタンを表示し、共有ロジック自体は含みません。コンテンツ共有・友達招待・保存・コピーなどで利用し、単行・複数行のオプション表示をサポートします。

📦 導入 ​

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

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

🎯 コード例 ​

🚀 基本用法 ​

options 属性で共有オプションを定義します。各オプションは名前とアイコンを持つオブジェクトです。クリック時に select イベントが発火し、共有ロジックを処理できます。

html
<template>
  <van-cell title="共有パネルを表示" is-link @click="showShare = true" />
  <van-share-sheet
    v-model:show="showShare"
    title="今すぐ友達に共有"
    :options="options"
    @select="onSelect"
  />
</template>
js
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: 'WeChat', icon: 'wechat' },
      { name: 'Weibo', icon: 'weibo' },
      { name: 'リンクをコピー', icon: 'link' },
      { name: 'ポスターを共有', icon: 'poster' },
      { name: 'QRコード', icon: 'qrcode' },
    ];

    const onSelect = (option) => {
      showToast(`${option.name}に共有しました`);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
};

📱 複数行のオプション表示 ​

共有オプションが多い場合は複数行で表示できます。options を二次元配列にし、各子配列が1行を表します。

html
<template>
  <van-cell title="複数行の共有オプション" is-link @click="showShare = true" />
  <van-share-sheet
    v-model:show="showShare"
    title="共有方法を選択"
    :options="options"
    @select="onSelect"
  />
</template>
js
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      [
        { name: 'WeChat', icon: 'wechat' },
        { name: 'モーメンツ', icon: 'wechat-moments' },
        { name: 'Weibo', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: 'リンクをコピー', icon: 'link' },
        { name: 'ポスターを共有', icon: 'poster' },
        { name: 'QRコード', icon: 'qrcode' },
        { name: 'ミニプログラムコード', icon: 'weapp-qrcode' },
      ],
    ];

    const onSelect = (option) => {
      showToast(`${option.name}を選択しました`);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
};

🎨 カスタムアイコン ​

独自の共有アイコンを使いたい場合は、内蔵アイコンに加えてカスタム画像も指定できます。icon に画像 URL を設定してください。

html
<template>
  <van-cell title="カスタムアイコン共有" is-link @click="showShare = true" />
  <van-share-sheet
    v-model:show="showShare"
    title="共有アイコンをカスタム"
    :options="options"
    @select="onSelect"
  />
</template>
js
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      {
        name: '炎の共有',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',
      },
      {
        name: '稲妻の共有',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',
      },
      {
        name: '水滴の共有',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',
      },
    ];

    const onSelect = (option) => {
      showToast(`${option.name}で共有しました`);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
};

📝 説明を表示 ​

共有オプションをより詳しく表示できます。description でパネルに説明文を追加し、各オプションにも description を設定して特徴を説明できます。

html
<template>
  <van-cell title="説明付き共有パネル" is-link @click="showShare = true" />
  <van-share-sheet
    v-model:show="showShare"
    title="素敵な内容を共有"
    description="好みの共有方法を選び、より多くの人に届けましょう"
    :options="options"
    @select="onSelect"
  />
</template>
js
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: 'WeChat', icon: 'wechat' },
      { name: 'Weibo', icon: 'weibo' },
      { 
        name: 'リンクをコピー', 
        icon: 'link', 
        description: 'クリップボードにコピー' 
      },
      { name: 'ポスターを共有', icon: 'poster' },
      { name: 'QRコード', icon: 'qrcode' },
    ];

    const onSelect = (option) => {
      showToast(`${option.name}で共有します`);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
};

📖 API ​

🎛️ Props ​

属性名説明型デフォルト
v-model:show🎭 共有パネルの表示（双方向バインディング）booleanfalse
options📋 共有オプション一覧（単行/複数行レイアウト対応）Option[][]
title🏷️ 上部タイトルstring-
cancel-text❌ キャンセルボタン文言（空文字で非表示）string'取消'
description📝 タイトル下の説明文string-
duration⏱️ アニメーション時間（秒）。0 で無効化number | string0.3
z-index📚 パネルの z-indexnumber | string2000+
round🔘 角丸枠を表示するかbooleantrue
overlay🎭 背景オーバーレイを表示するかbooleantrue
overlay-class🎨 オーバーレイのカスタムクラスstring | Array | object-
overlay-style🎨 オーバーレイのカスタムスタイルobject-
lock-scroll🔒 背景スクロールをロックするかbooleantrue
lazy-render🚀 表示時にのみ内容をレンダリングするかbooleantrue
close-on-popstate🔙 ページバック時に自動で閉じるかbooleantrue
close-on-click-overlay👆 オーバーレイクリックで閉じるかbooleantrue
safe-area-inset-bottom📱 下部セーフエリア適応を有効化するかbooleantrue
teleport🎯 マウント先のノードを指定string | Element-
before-close🚪 閉じる前のコールバック。false で閉じるのを阻止(action: string) => boolean | Promise<boolean>-

📋 Option データ構造 ​

options はオブジェクト配列です。各オブジェクトが共有オプションを表します：

キー名説明型
name📝 共有チャネル名string
description💬 共有オプションの説明string
icon🎨 アイコン（内蔵アイコンまたは画像 URL）string
className🎭 共有オプションのカスタムクラス名string

🎯 Events ​

イベント名説明コールバック引数
select🎯 共有オプションをクリック時に発火option: Option, index: number
cancel❌ キャンセルボタンをクリック時に発火-
open🚀 パネルを開いたときに発火-
close🔚 パネルを閉じたときに発火-
opened✅ パネルを開き、アニメーション終了後に発火-
closed✅ パネルを閉じ、アニメーション終了後に発火-
click-overlay👆 オーバーレイをクリック時に発火event: MouseEvent

🎨 Slots ​

名称説明
title🏷️ 上部タイトルのカスタマイズ
description📝 説明文のカスタマイズ
cancel❌ キャンセルボタンのカスタマイズ

📝 型定義 ​

コンポーネントは以下の型定義をエクスポートし、TypeScript での開発を容易にします：

ts
import type { 
  ShareSheetProps, 
  ShareSheetOption, 
  ShareSheetOptions 
} from 'vant';

🎨 テーマカスタマイズ ​

🎛️ スタイル変数 ​

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

名称デフォルト値説明
--van-share-sheet-header-paddingvar(--van-padding-sm) var(--van-padding-md) var(--van-padding-base)🔲 ヘッダー領域の内側余白
--van-share-sheet-title-colorvar(--van-text-color)🎨 タイトル文字色
--van-share-sheet-title-font-sizevar(--van-font-size-md)📝 タイトル文字サイズ
--van-share-sheet-title-line-heightvar(--van-line-height-md)📏 タイトル行の高さ
--van-share-sheet-description-colorvar(--van-text-color-2)🎨 説明文字色
--van-share-sheet-description-font-sizevar(--van-font-size-sm)📝 説明文字サイズ
--van-share-sheet-description-line-height16px📏 説明文字の行の高さ
--van-share-sheet-icon-size48px🎨 共有アイコンサイズ
--van-share-sheet-option-name-colorvar(--van-gray-7)🎨 オプション名の色
--van-share-sheet-option-name-font-sizevar(--van-font-size-sm)📝 オプション名の文字サイズ
--van-share-sheet-option-description-colorvar(--van-text-color-3)🎨 オプション説明の色
--van-share-sheet-option-description-font-sizevar(--van-font-size-sm)📝 オプション説明の文字サイズ
--van-share-sheet-cancel-button-font-sizevar(--van-font-size-lg)📝 キャンセルボタン文字サイズ
--van-share-sheet-cancel-button-height48px📏 キャンセルボタンの高さ
--van-share-sheet-cancel-button-backgroundvar(--van-background-2)🎨 キャンセルボタンの背景色

よくある質問 ​

共有ロジックはどう実装する？ ​

アプリやブラウザごとに共有 API や方法は異なります。そのため ShareSheet コンポーネントは共有ロジックを提供しません。業務に合わせて実装してください。

WeChat 内共有 ​

WeChat は共有 API を提供していないため、右上の共有から行うよう案内してください。

アプリ内共有 ​

JSBridge を通じてネイティブアプリの SDK を呼び出し共有します。

ポスターや QR コードの共有 ​

画像は Popup コンポーネントでレイヤー表示し、保存して共有するよう案内してください。

📚 関連ドキュメント ​

🎭 レイヤーコンポーネント ​

🎨 表示コンポーネント ​

  • Icon アイコン - 🎨 豊富なアイコンライブラリ。共有オプションの視覚的識別に
  • Cell セル - 📱 リスト項目コンポーネント。共有オプションの構築に利用
  • Grid グリッド - 🔲 複数オプションの表示に適したグリッドレイアウト

🔧 ツールコンポーネント ​

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

Copyright © 2025 siex.cn ｜ sitemap