/*! For license information please see 5023.d9d14438.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["5023"],{6836:function(s,n,t){"use strict";t.r(n);var a=t("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'ShareSheet
\nIntro
\n
A pop-up sharing panel at the bottom for displaying the action buttons corresponding to each sharing channel, without specific sharing logic.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport { ShareSheet } from 'vant';\n\nconst app = createApp();\napp.use(ShareSheet);\n
\n
Usage
\nBasic Usage
\n
<van-cell title="Show ShareSheet" @click="showShare = true" />\n<van-share-sheet\n v-model:show="showShare"\n title="Share"\n :options="options"\n @select="onSelect"\n/>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'Link', icon: 'link' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n ];\n\n const onSelect = (option) => {\n showToast(option.name);\n showShare.value = false;\n };\n\n return {\n options,\n onSelect,\n showShare,\n };\n },\n};\n
\n
Multi Line
\n
<van-share-sheet v-model:show="showShare" title="Share" :options="options" />\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'WeChat Moments', icon: 'wechat-moments' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'QQ', icon: 'qq' },\n ],\n [\n { name: 'Link', icon: 'link' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n { name: 'Weapp Qrcode', icon: 'weapp-qrcode' },\n ],\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n
Custom Icon
\n
<van-share-sheet v-model:show="showShare" :options="options" />\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-fire.png',\n },\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-light.png',\n },\n {\n name: 'Name',\n icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/custom-icon-water.png',\n },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n
Show Description
\n
<van-share-sheet\n v-model:show="showShare"\n :options="options"\n title="Share"\n description="Description"\n/>\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const showShare = ref(false);\n const options = [\n { name: 'WeChat', icon: 'wechat' },\n { name: 'Weibo', icon: 'weibo' },\n { name: 'Link', icon: 'link', description: 'Description' },\n { name: 'Poster', icon: 'poster' },\n { name: 'Qrcode', icon: 'qrcode' },\n ];\n\n return {\n options,\n showShare,\n };\n },\n};\n
\n
API
\nProps
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| v-model:show | \nWhether to show ShareSheet | \nboolean | \nfalse | \n
\n\n| options | \nShare options | \nOption[] | \n[] | \n
\n\n| title | \nTitle | \nstring | \n- | \n
\n\n| cancel-text | \nCancel button text | \nstring | \n\'Cancel\' | \n
\n\n| description | \nDescription | \nstring | \n- | \n
\n\n| duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
\n\n| z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
\n\n| round | \nWhether to show round corner | \nboolean | \ntrue | \n
\n\n| overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
\n\n| overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
\n\n| overlay-style | \nCustom overlay style | \nobject | \n- | \n
\n\n| lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
\n\n| lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
\n\n| close-on-popstate | \nWhether to close when popstate | \nboolean | \ntrue | \n
\n\n| close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
\n\n| safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \ntrue | \n
\n\n| teleport | \nSpecifies a target element where ShareSheet will be mounted | \nstring | Element | \n- | \n
\n\n| before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
\n\n
\n
Data Structure of Option
\n
\n\n\n| Key | \nDescription | \nType | \n
\n\n\n\n| name | \nOption name | \nstring | \n
\n\n| description | \nOption description | \nstring | \n
\n\n| icon | \nOption icon, can be set to wechat weibo qq link qrcode poster weapp-qrcode wechat-moments or image URL | \nstring | \n
\n\n| className | \nOption className is used to set the class props to the share item | \nstring | \n
\n\n
\n
Events
\n
\n\n\n| Event | \nDescription | \nArguments | \n
\n\n\n\n| select | \nEmitted when an option is clicked | \noption: Option, index: number | \n
\n\n| cancel | \nEmitted when the cancel button is clicked | \n- | \n
\n\n| open | \nEmitted when opening ShareSheet | \n- | \n
\n\n| close | \nEmitted when closing ShareSheet | \n- | \n
\n\n| opened | \nEmitted when ShareSheet is opened | \n- | \n
\n\n| closed | \nEmitted when ShareSheet is closed | \n- | \n
\n\n| click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
\n\n
\n
Slots
\n
\n\n\n| Name | \nDescription | \n
\n\n\n\n| title | \nCustom title | \n
\n\n| description | \nCustom description | \n
\n\n| cancel | \nCustom the content of cancel button | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type {\n ShareSheetProps,\n ShareSheetOption,\n ShareSheetOptions,\n} from 'vant';\n
\n
Theming
\nCSS Variables
\n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n
\n\n\n| Name | \nDefault Value | \nDescription | \n
\n\n\n\n| --van-share-sheet-header-padding | \nvar(--van-padding-sm) var(--van-padding-md) var(--van-padding-base) | \n- | \n
\n\n| --van-share-sheet-title-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-share-sheet-title-font-size | \nvar(--van-font-size-md) | \n- | \n
\n\n| --van-share-sheet-title-line-height | \nvar(--van-line-height-md) | \n- | \n
\n\n| --van-share-sheet-description-color | \nvar(--van-text-color-2) | \n- | \n
\n\n| --van-share-sheet-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
\n\n| --van-share-sheet-description-line-height | \n16px | \n- | \n
\n\n| --van-share-sheet-icon-size | \n48px | \n- | \n
\n\n| --van-share-sheet-option-name-color | \nvar(--van-gray-7) | \n- | \n
\n\n| --van-share-sheet-option-name-font-size | \nvar(--van-font-size-sm) | \n- | \n
\n\n| --van-share-sheet-option-description-color | \nvar(--van-text-color-3) | \n- | \n
\n\n| --van-share-sheet-option-description-font-size | \nvar(--van-font-size-sm) | \n- | \n
\n\n| --van-share-sheet-cancel-button-font-size | \nvar(--van-font-size-lg) | \n- | \n
\n\n| --van-share-sheet-cancel-button-height | \n48px | \n- | \n
\n\n| --van-share-sheet-cancel-button-background | \nvar(--van-background-2) | \n- | \n
\n\n
\n