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: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];

    const onSelect = (option) => {
      showToast(`分享到${option.name}`);
      showShare.value = false;
    };

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

📱 展示多行选项 ​

当分享选项很多时，可以分成多行展示！将 options 定义为二维数组，每个子数组代表一行，让界面更加整洁美观。

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: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', 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: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { 
        name: '复制链接', 
        icon: 'link', 
        description: '复制到剪贴板' 
      },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', 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-index 层级值number | 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🎨 图标，支持内置图标或图片 URLstring
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)🎨 取消按钮背景色

常见问题 ​

如何实现分享逻辑？ ​

在不同的 App 或浏览器中，存在各式各样的分享接口或分享方式，因此 ShareSheet 组件不提供具体的分享逻辑，需要开发者根据业务场景自行实现。

微信内分享 ​

由于微信未提供分享相关的 API，需要引导用户点击右上角进行分享。

App 内分享 ​

可以通过 JSBridge 调用原生应用的 SDK 进行分享。

分享海报或二维码 ​

可以通过 Popup 组件以弹层的形式展示图片，然后引导用户保存图片进行分享。

📚 相关文档 ​

🎭 弹层组件 ​

🎨 展示组件 ​

  • Icon 图标 - 🎨 丰富的图标库，为分享选项提供视觉标识
  • Cell 单元格 - 📱 列表项组件，可用于构建自定义分享选项
  • Grid 宫格 - 🔲 网格布局，适合展示多个分享选项

🔧 工具组件 ​

基於Vant構建的企業級移動端解決方案

Copyright © 2025 siex.cn ｜ sitemap