vant/src/share-sheet

ShareSheet

Install

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

Vue.use(ShareSheet);

Usage

Basic Usage

<van-cell title="Show ShareSheet" @click="showShare = true" />
<van-share-sheet
  v-model="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="showShare" title="Share" :options="options" />

export default {
  data() {
    return {
      showShare: false,
      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' },
        ],
      ],
    };
  },
};

Show Description

<van-share-sheet
  v-model="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
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 overlay is clicked	boolean	true
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	true
get-container	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 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	-
click-overlay v2.9.1	Emitted when overlay is clicked	-

Slots

Name	Description
title	Custom title
description	Custom description

Less Variables

How to use: Custom Theme.

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