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

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://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',
      },
      {
        name: 'Name',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',
      },
      {
        name: 'Name',
        icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/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`
round `v3.2.6`	Whether to show round corner	boolean	`true`
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

Types

The component exports the following type definitions:

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

Theming

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-text-color-2)	-
--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-text-color-3)	-
--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-background-2)	-

7.0 KiB Raw Blame History