介绍
从底部向上弹出分享菜单。
引入
js
import ShareSheet from 'sard-uniapp/components/share-sheet/share-sheet.vue'代码演示
基础使用
使用 v-model:visible 属性控制显隐,使用 itemList 属性配置分享项。
vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'
const itemList = [
{
name: 'Wechat',
color: '#fff',
background: '#0bc15f',
icon: 'wechat-fill',
iconFamily: 'demo-icons',
},
{
name: 'Alipay',
color: '#fff',
background: '#1677ff',
icon: 'alipay-fill',
iconFamily: 'demo-icons',
},
{
name: 'Twitter',
color: '#fff',
background: '#1d9bf0',
icon: 'twitter-fill',
iconFamily: 'demo-icons',
},
{
name: 'Facebook',
color: '#fff',
background: '#1877f2',
icon: 'facebook-circle-fill',
iconFamily: 'demo-icons',
},
]
const visible = ref(false)
const onSelect = (item: ShareSheetItem) => {
toast(item.name)
}
</script>vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
{
name: "Wechat",
color: "#fff",
background: "#0bc15f",
icon: "wechat-fill",
iconFamily: "demo-icons"
},
{
name: "Alipay",
color: "#fff",
background: "#1677ff",
icon: "alipay-fill",
iconFamily: "demo-icons"
},
{
name: "Twitter",
color: "#fff",
background: "#1d9bf0",
icon: "twitter-fill",
iconFamily: "demo-icons"
},
{
name: "Facebook",
color: "#fff",
background: "#1877f2",
icon: "facebook-circle-fill",
iconFamily: "demo-icons"
}
];
const visible = ref(false);
const onSelect = (item) => {
toast(item.name);
};
</script>多行
itemList 属性值如果是二维数组则渲染成多行。
vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'
const itemList = [
[
{
name: 'Wechat',
color: '#fff',
background: '#0bc15f',
iconFamily: 'demo-icons',
icon: 'wechat-fill',
},
{
name: 'Alipay',
color: '#fff',
background: '#1677ff',
iconFamily: 'demo-icons',
icon: 'alipay-fill',
},
{
name: 'Twitter',
color: '#fff',
background: '#1d9bf0',
iconFamily: 'demo-icons',
icon: 'twitter-fill',
},
{
name: 'Facebook',
color: '#fff',
background: '#1877f2',
iconFamily: 'demo-icons',
icon: 'facebook-circle-fill',
},
],
[
{
name: 'Spotify',
color: '#fff',
background: '#1ed760',
iconFamily: 'demo-icons',
icon: 'spotify-fill',
},
{
name: 'Skype',
color: '#fff',
background: '#0b64a4',
iconFamily: 'demo-icons',
icon: 'skype-fill',
},
{
name: 'Youtube',
color: '#fff',
background: '#ff0000',
iconFamily: 'demo-icons',
icon: 'youtube-fill',
},
{
name: 'Paypal',
color: '#fff',
background: '#0070ba',
iconFamily: 'demo-icons',
icon: 'paypal-fill',
},
{
name: 'Whatsapp',
color: '#fff',
background: '#128c7e',
iconFamily: 'demo-icons',
icon: 'whatsapp-fill',
},
{
name: 'Telegram',
color: '#fff',
background: '#0088cc',
iconFamily: 'demo-icons',
icon: 'telegram-fill',
},
{
name: 'Snapchat',
color: '#000',
background: '#fffc00',
iconFamily: 'demo-icons',
icon: 'snapchat-fill',
},
],
]
const visible = ref(false)
const onSelect = (item: ShareSheetItem) => {
toast(item.name)
}
</script>vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
[
{
name: "Wechat",
color: "#fff",
background: "#0bc15f",
iconFamily: "demo-icons",
icon: "wechat-fill"
},
{
name: "Alipay",
color: "#fff",
background: "#1677ff",
iconFamily: "demo-icons",
icon: "alipay-fill"
},
{
name: "Twitter",
color: "#fff",
background: "#1d9bf0",
iconFamily: "demo-icons",
icon: "twitter-fill"
},
{
name: "Facebook",
color: "#fff",
background: "#1877f2",
iconFamily: "demo-icons",
icon: "facebook-circle-fill"
}
],
[
{
name: "Spotify",
color: "#fff",
background: "#1ed760",
iconFamily: "demo-icons",
icon: "spotify-fill"
},
{
name: "Skype",
color: "#fff",
background: "#0b64a4",
iconFamily: "demo-icons",
icon: "skype-fill"
},
{
name: "Youtube",
color: "#fff",
background: "#ff0000",
iconFamily: "demo-icons",
icon: "youtube-fill"
},
{
name: "Paypal",
color: "#fff",
background: "#0070ba",
iconFamily: "demo-icons",
icon: "paypal-fill"
},
{
name: "Whatsapp",
color: "#fff",
background: "#128c7e",
iconFamily: "demo-icons",
icon: "whatsapp-fill"
},
{
name: "Telegram",
color: "#fff",
background: "#0088cc",
iconFamily: "demo-icons",
icon: "telegram-fill"
},
{
name: "Snapchat",
color: "#000",
background: "#fffc00",
iconFamily: "demo-icons",
icon: "snapchat-fill"
}
]
];
const visible = ref(false);
const onSelect = (item) => {
toast(item.name);
};
</script>标题和描述
使用 title 和 description 配置标题和描述。
vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
title="分享到"
description="这是描述"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'
const itemList = [
{
name: 'Wechat',
color: '#fff',
background: '#0bc15f',
iconFamily: 'demo-icons',
icon: 'wechat-fill',
},
{
name: 'Alipay',
color: '#fff',
background: '#1677ff',
iconFamily: 'demo-icons',
icon: 'alipay-fill',
description: '这是描述这是描述',
},
{
name: 'Twitter',
color: '#fff',
background: '#1d9bf0',
iconFamily: 'demo-icons',
icon: 'twitter-fill',
},
{
name: 'Facebook',
color: '#fff',
background: '#1877f2',
iconFamily: 'demo-icons',
icon: 'facebook-circle-fill',
},
]
const visible = ref(false)
const onSelect = (item: ShareSheetItem) => {
toast(item.name)
}
</script>vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
title="分享到"
description="这是描述"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
{
name: "Wechat",
color: "#fff",
background: "#0bc15f",
iconFamily: "demo-icons",
icon: "wechat-fill"
},
{
name: "Alipay",
color: "#fff",
background: "#1677ff",
iconFamily: "demo-icons",
icon: "alipay-fill",
description: "\u8FD9\u662F\u63CF\u8FF0\u8FD9\u662F\u63CF\u8FF0"
},
{
name: "Twitter",
color: "#fff",
background: "#1d9bf0",
iconFamily: "demo-icons",
icon: "twitter-fill"
},
{
name: "Facebook",
color: "#fff",
background: "#1877f2",
iconFamily: "demo-icons",
icon: "facebook-circle-fill"
}
];
const visible = ref(false);
const onSelect = (item) => {
toast(item.name);
};
</script>图片类型图标
icon 属性可以是图片路径。
vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'
const itemList = [
{
name: 'Sard',
icon: 'https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg',
},
{
name: 'Wechat',
color: '#fff',
background: '#0bc15f',
iconFamily: 'demo-icons',
icon: 'wechat-fill',
},
]
const visible = ref(false)
const onSelect = (item: ShareSheetItem) => {
toast(item.name)
}
</script>vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
{
name: "Sard",
icon: "https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg"
},
{
name: "Wechat",
color: "#fff",
background: "#0bc15f",
iconFamily: "demo-icons",
icon: "wechat-fill"
}
];
const visible = ref(false);
const onSelect = (item) => {
toast(item.name);
};
</script>禁用
禁用的选项不可点击。
vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="ts">
import { toast, type ShareSheetItem } from 'sard-uniapp'
import { ref } from 'vue'
const itemList = [
{
name: 'Wechat',
color: '#fff',
background: '#0bc15f',
icon: 'wechat-fill',
iconFamily: 'demo-icons',
disabled: true,
},
{
name: 'Alipay',
color: '#fff',
background: '#1677ff',
icon: 'alipay-fill',
iconFamily: 'demo-icons',
},
]
const visible = ref(false)
const onSelect = (item: ShareSheetItem) => {
toast(item.name)
}
</script>vue
<template>
<sar-button @click="visible = true">显示分享面板</sar-button>
<sar-share-sheet
v-model:visible="visible"
:item-list="itemList"
cancel="取消"
@select="onSelect"
/>
</template>
<script setup lang="js">
import { toast } from "sard-uniapp";
import { ref } from "vue";
const itemList = [
{
name: "Wechat",
color: "#fff",
background: "#0bc15f",
icon: "wechat-fill",
iconFamily: "demo-icons",
disabled: true
},
{
name: "Alipay",
color: "#fff",
background: "#1677ff",
icon: "alipay-fill",
iconFamily: "demo-icons"
}
];
const visible = ref(false);
const onSelect = (item) => {
toast(item.name);
};
</script>API
ShareSheetProps
继承 PopupProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| item-list | 面板选项列表 | ShareSheetItem[] | ShareSheetItem[][] | [] |
| title | 面板标题 | string | - |
| description | 面板描述 | string | - |
| cancel | 取消按钮内容 | string | - |
| visible (v-model) | 面板是否可见 | boolean | - |
| overlay-closable | 点击遮罩后是否关闭 | boolean | true |
| before-close | 关闭前的回调,返回 false 或 rejected 状态的 Promise 可阻止关闭 | (type: 'close' | 'cancel' | 'select') => boolean | Promise\<any> | - |
| duration | 显隐动画时长,单位 ms | number | 300 |
ShareSheetEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:visible | 分享面板显隐时触发 | (visible: boolean) => void |
| close | 点击遮罩时触发 | () => void |
| cancel | 点击取消按钮时触发 | () => void |
| select | 点击分享项时触发 | (item: ShareSheetItem) => void |
| visible-hook 1.22.1+ | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
| before-enter 1.22.1+ | 入场动画开始前触发 | () => void |
| enter 1.22.1+ | 入场动画开始时触发 | () => void |
| after-enter 1.22.1+ | 入场动画结束时触发 | () => void |
| enter-cancelled 1.22.1+ | 入场动画取消时触发 | () => void |
| before-leave 1.22.1+ | 退场动画开始前触发 | () => void |
| leave 1.22.1+ | 退场动画开始时触发 | () => void |
| after-leave 1.22.1+ | 退场动画结束时触发 | () => void |
| leave-cancelled 1.22.1+ | 退场动画取消时触发 | () => void |
ShareSheetItem
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| name | 名称 | string | - |
| description | 标签 | string | - |
| color | 图标颜色 | string | - |
| background | 图标背景颜色 | string | - |
| icon | 图标名称,可以是图片路径 | string | - |
| iconFamily | 图标字体 | string | - |
| disabled | 禁用状态 | boolean | false |
主题定制
CSS 变量
scss
page,
.sar-portal {
--sar-share-sheet-border-radius: var(--sar-rounded-xl);
--sar-share-sheet-border-color: var(--sar-border-color);
--sar-share-sheet-bg: var(--sar-emphasis-bg);
--sar-share-sheet-header-padding: 32rpx;
--sar-share-sheet-title-font-size: var(--sar-text-lg);
--sar-share-sheet-description-margin-top: 16rpx;
--sar-share-sheet-description-font-size: var(--sar-text-base);
--sar-share-sheet-description-color: var(--sar-tertiary-color);
--sar-share-sheet-row-padding-y: 32rpx;
--sar-share-sheet-row-padding-x: 16rpx;
--sar-share-sheet-item-width: 160rpx;
--sar-share-sheet-item-active-opacity: var(--sar-active-opacity);
--sar-share-sheet-icon-wrapper-size: 96rpx;
--sar-share-sheet-icon-wrapper-border-radius: var(--sar-rounded-full);
--sar-share-sheet-icon-font-size: 48rpx;
--sar-share-sheet-icon-color: var(--sar-tertiary-color);
--sar-share-sheet-icon-bg: var(--sar-secondary-bg);
--sar-share-sheet-name-margin-top: 16rpx;
--sar-share-sheet-name-padding-x: 8rpx;
--sar-share-sheet-name-font-size: var(--sar-text-base);
--sar-share-sheet-name-color: var(--sar-tertiary-color);
--sar-share-sheet-item-description-margin-top: 0;
--sar-share-sheet-item-description-padding-x: 8rpx;
--sar-share-sheet-item-description-font-size: var(--sar-text-sm);
--sar-share-sheet-item-description-color: var(--sar-fourth-color);
--sar-share-sheet-gap-bg: var(--sar-body-bg);
--sar-share-sheet-gap-height: 16rpx;
--sar-share-sheet-cancel-min-height: 96rpx;
--sar-share-sheet-cancel-padding: 16rpx 32rpx;
--sar-share-sheet-cancel-font-size: var(--sar-text-lg);
--sar-share-sheet-cancel-active-bg: var(--sar-active-bg);
}