vant/src/share-sheet

ShareSheet

Intro

A pop-up sharing panel at the bottom for displaying the action buttons corresponding to each sharing channel, without specific sharing logic.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

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

Usage

Basic Usage

<van-cell title="Show ShareSheet" @click="showShare = true" />
<van-share-sheet
  v-model:show="showShare"
  title="Share"
  :options="options"
  @select="onSelect"
/>

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

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: 'Wechat', icon: 'wechat' },
      { name: 'Weibo', icon: 'weibo' },
      { name: 'Link', icon: 'link' },
      { name: 'Poster', icon: 'poster' },
      { name: 'Qrcode', icon: 'qrcode' },
    ];

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };

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

Multi Line

<van-share-sheet v-model:show="showShare" title="Share" :options="options" />

import { ref } from 'vue';

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      [
        { name: 'Wechat', icon: 'wechat' },
        { name: 'Wechat Moments', icon: 'wechat-moments' },
        { name: 'Weibo', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: 'Link', icon: 'link' },
        { name: 'Poster', icon: 'poster' },
        { name: 'Qrcode', icon: 'qrcode' },
        { name: 'Weapp Qrcode', icon: 'weapp-qrcode' },
      ],
    ];

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

Custom Icon

<van-share-sheet v-model:show="showShare" :options="options" />

import { ref } from 'vue';

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      {
        name: 'Name',
        icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
      },
      {
        name: 'Name',
        icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
      },
      {
        name: 'Name',
        icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
      },
    ];

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

Show Description

<van-share-sheet
  v-model:show="showShare"
  :options="options"
  title="Share"
  description="Description"
/>

import { ref } from 'vue';

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: 'Wechat', icon: 'wechat' },
      { name: 'Weibo', icon: 'weibo' },
      { name: 'Link', icon: 'link', description: 'Description' },
      { name: 'Poster', icon: 'poster' },
      { name: 'Qrcode', icon: 'qrcode' },
    ];

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

API

Props

Attribute	Description	Type	Default
v-model:show	Whether to show ShareSheet	boolean	false
options	Share options	Option[]	[]
title	Title	string	-
cancel-text	Cancel button text	string	'Cancel'
description	Description	string	-
duration	Transition duration, unit second	number | string	0.3
overlay	Whether to show overlay	boolean	true
overlay-class	Custom overlay class	string | Array | object	-
overlay-style	Custom overlay style	object	-
lock-scroll	Whether to lock background scroll	boolean	true
lazy-render	Whether to lazy render util appeared	boolean	true
close-on-popstate	Whether to close when popstate	boolean	true
close-on-click-overlay	Whether to close when overlay is clicked	boolean	true
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	true
teleport	Specifies a target element where ShareSheet will be mounted	string | Element	-
before-close v3.1.4	Callback function before close	(action: string) => boolean | Promise<boolean>	-

Data Structure of Option

Key	Description	Type
name	Option name	string
description	Option description	string
icon	Option icon，can be set to wechat weibo qq link qrcode poster weapp-qrcode wechat-moments or image URL	string
className	Option className is used to set the class props to the share item	string

Events

Event	Description	Arguments
select	Emitted when an option is clicked	option: Option, index: number
cancel	Emitted when the cancel button is clicked	-
open	Emitted when opening ShareSheet	-
close	Emitted when closing ShareSheet	-
opened	Emitted when ShareSheet is opened	-
closed	Emitted when ShareSheet is closed	-
click-overlay	Emitted when overlay is clicked	event: MouseEvent

Slots

Name	Description
title	Custom title
description	Custom description
cancel v3.0.10	Custom the content of cancel button

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-share-sheet-header-padding	var(--van-padding-sm) var(--van-padding-md) var(--van-padding-base)	-
--van-share-sheet-title-color	var(--van-text-color)	-
--van-share-sheet-title-font-size	var(--van-font-size-md)	-
--van-share-sheet-title-line-height	var(--van-line-height-md)	-
--van-share-sheet-description-color	var(--van-gray-6)	-
--van-share-sheet-description-font-size	var(--van-font-size-sm)	-
--van-share-sheet-description-line-height	16px	-
--van-share-sheet-icon-size	48px	-
--van-share-sheet-option-name-color	var(--van-gray-7)	-
--van-share-sheet-option-name-font-size	var(--van-font-size-sm)	-
--van-share-sheet-option-description-color	var(--van-gray-5)	-
--van-share-sheet-option-description-font-size	var(--van-font-size-sm)	-
--van-share-sheet-cancel-button-font-size	var(--van-font-size-lg)	-
--van-share-sheet-cancel-button-height	48px	-
--van-share-sheet-cancel-button-background	var(--van-white)	-