vant/src/share-sheet

ShareSheet

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 { Toast } from 'vant';

export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: 'Wechat', icon: 'wechat' },
        { name: 'Weibo', icon: 'weibo' },
        { name: 'Link', icon: 'link' },
        { name: 'Poster', icon: 'poster' },
        { name: 'Qrcode', icon: 'qrcode' },
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
};

Multi Line

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

export default {
  data() {
    return {
      showShare: false,
      options: [
        [
          { name: 'Wechat', icon: 'wechat' },
          { name: 'Weibo', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: 'Link', icon: 'link' },
          { name: 'Poster', icon: 'poster' },
          { name: 'Qrcode', icon: 'qrcode' },
        ],
      ],
    };
  },
};

Show Description

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

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

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
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 click overlay	boolean	true
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	true
teleport	Return the mount node for ShareSheet	string | Element	-

Data Structure of Option

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

Events

Event	Description	Arguments
select	Triggered when click option	option: Option, index: number
cancel	Triggered when click cancel button	-
click-overlay v2.9.1	Triggered when click overlay	-

Slots

Name	Description
title	Custom title
description	Custom description