ShareSheet - Vant 4

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

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { 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' }, ]; constonSelect = (option) => { showToast(option.name); showShare.value = false; }; return { options, onSelect, showShare, }; }, };

Multi Line

import { ref } from'vue'; exportdefault { 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

import { ref } from'vue'; exportdefault { 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

import { ref } from'vue'; exportdefault { 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*
z-index	Set the z-index to a fixed value	*number	string*
round	Whether to show round corner	boolean	true
overlay	Whether to show overlay	boolean	true
overlay-class	Custom overlay class	*string	Array
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	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	Custom the content of cancel button

Types

The component exports the following type definitions:

importtype { 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)	-