ShareSheet 分享面板

底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。

导入

import ShareSheet from '@/components/feedback/ShareSheet.vue';

使用方法

基础用法

<template>
  <ShareSheet
    v-model:show="show1"
    :items="[
      { title: '微信', icon: 'wechat' },
      { title: '微博', icon: 'sina' },
      { title: '复制链接', icon: 'link' },
      { title: '分享海报', icon: 'poster' },
      { title: '二维码', icon: 'qrcode' },
    ]"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ShareSheet from '@/components/feedback/ShareSheet.vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';

const toast = ref<ToastInstance>();
const show1 = ref(false);

function onSelect(item: any) {
  toast.value?.show({
    content: `选中了 ${item.title}`,
    duration: 2000,
  });
}
</script>

多行选项

<template>
  <ShareSheet
    v-model:show="show2"
    :items="[
      [
        { title: '微信', icon: 'wechat' },
        { title: '朋友圈', icon: 'wechat-moments' },
        { title: '微博', icon: 'weibo' },
        { title: 'QQ', icon: 'qq' },
      ],
      [
        { title: '复制链接', icon: 'link' },
        { title: '分享海报', icon: 'poster' },
        { title: '二维码', icon: 'qrcode' },
        { title: '小程序码', icon: 'wechat-app-qrcode' },
      ]
    ]"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ShareSheet from '@/components/feedback/ShareSheet.vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';

const toast = ref<ToastInstance>();
const show2 = ref(false);

function onSelect(item: any) {
  toast.value?.show({
    content: `选中了 ${item.title}`,
    duration: 2000,
  });
}
</script>

自定义图标

<template>
  <ShareSheet
    v-model:show="show3"
    :items="[
      { title: '自定义分享', icon: 'warning' },
      { title: '自定义2', icon: 'https://imengyu.top/assets/images/test/2.jpg' },
      { title: '自定义3', icon: 'qqzone' },
      { title: '自定义4', icon: 'wechat' },
    ]"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ShareSheet from '@/components/feedback/ShareSheet.vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';

const toast = ref<ToastInstance>();
const show3 = ref(false);

function onSelect(item: any) {
  toast.value?.show({
    content: `选中了 ${item.title}`,
    duration: 2000,
  });
}
</script>

显示描述信息

<template>
  <ShareSheet
    v-model:show="show4"
    title="分享"
    description="请选择您要分享的渠道"
    :items="[
      { title: '微信', icon: 'wechat' },
      { title: '微博', icon: 'weibo' },
      { title: '复制链接', icon: 'link' },
      { title: '分享海报', icon: 'poster' },
      { title: '二维码', icon: 'qrcode' },
    ]"
    @select="onSelect"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ShareSheet from '@/components/feedback/ShareSheet.vue';
import Toast, { type ToastInstance } from '@/components/feedback/Toast.vue';

const toast = ref<ToastInstance>();
const show4 = ref(false);

function onSelect(item: any) {
  toast.value?.show({
    content: `选中了 ${item.title}`,
    duration: 2000,
  });
}
</script>

API 参考

Props

名称	说明	类型	必填	默认值
show	是否显示分享面板	boolean	-	false
items	分享选项列表，支持二维数组来展示多行数据	(ShareSheetItem[])|ShareSheetItem[][]	true	-
title	顶部标题	string	-	-
description	选项上方的描述信息	string	-	-
cancelText	取消按钮文字	string	-	取消
showCancel	是否显示取消按钮	boolean	-	true
itemStyle	选项条目样式	ViewStyle	-	-
itemTextStyle	选项条目文字样式	TextStyle	-	-

ShareSheetItem

名称	说明	类型	必填	默认值
title	选项名称	string	true	-
icon	图标名称或图片链接	string	-	-
color	图标颜色	string	-	-
backgroundColor	图标背景色	string	-	-
disabled	是否禁用	boolean	-	false

Slots

名称	说明
default	自定义内容，默认会展示 ShareSheet 的全部内容
content	自定义分享选项区域

Events

名称	说明	参数
update:show	显示状态改变时触发	value: boolean
select	选择分享选项时触发	item: ShareSheetItem

主题变量

通过修改这些变量，您可以自定义组件的样式：

名称	说明	默认值
ShareSheetItemIconSize	选项图标尺寸	70
ShareSheetItemWidth	选项宽度	25%
ShareSheetItemPaddingVertical	选项垂直内边距	25
ShareSheetItemPaddingHorizontal	选项水平内边距	0
ShareSheetItemTextMarginTop	选项文字上外边距	15
ShareSheetItemTextFontSize	选项文字字体大小	26
ShareSheetCancelBackgroundColor	取消按钮背景色	light
ShareSheetCancelPaddingTop	取消按钮上内边距	20
ShareSheetCancelBold	取消按钮文字是否加粗	false
ShareSheetCancelColor	取消按钮文字颜色	text.content