Vant ShareSheet 分享面板功能

发布时间：2023-04-20 12:35:04 所属栏目：教程来源：

导读：Vant ShareSheet 分享面板是从底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。2.6 版本开始支持此组件。

引入
import Vue from 'vue';
import { ShareSheet } from '

Vant ShareSheet 分享面板是从底部弹起的分享面板，用于展示各分享渠道对应的操作按钮，不含具体的分享逻辑。2.6 版本开始支持此组件。

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

Vue.use(ShareSheet);
基础用法
分享面板通过 options 属性来定义分享选项，数组的每一项是一个对象，对象格式见文档下方表格。

<van-cell title="显示分享面板" @click="showShare = true" />
<van-share-sheet
v-model="showShare"
title="立即分享给好友"
:options="options"
@select="onSelect"
/>
import { Toast } from 'vant';

export default {
data() {
return {
showShare: false,
options: [
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
{ name: '复制链接', icon: 'link' },
{ name: '分享海报', icon: 'poster' },
{ name: '二维码', icon: 'qrcode' },
],
};
},
methods: {
onSelect(option) {
Toast(option.name);
this.showShare = false;
},
},
};
展示多行选项
当分享选项的数量较多时，可以将 options 定义为数组嵌套的格式，每个子数组会作为一行选项展示。

<van-share-sheet
v-model="showShare"
title="立即分享给好友"
:options="options"
/>
export default {
data() {
return {
showShare: false,
options: [
[
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
{ name: 'QQ', icon: 'qq' },
],
[
{ name: '复制链接', icon: 'link' },
{ name: '分享海报', icon: 'poster' },
{ name: '二维码', icon: 'qrcode' },
],
],
};
},
};
自定义图标
除了使用内置的几种图标外，可以直接在 icon 中传入图片 URL 来使用自定义的图标。

<van-share-sheet v-model="showShare" :options="options" />
export default {
data() {
return {
showShare: false,
options: [
{
name: '名称',
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
},
{
name: '名称',
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
},
{
name: '名称',
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
},
],
};
},
};
展示描述信息
通过 description 属性可以设置标题下方的描述文字, 在 options 内设置 description 属性可以添加分享选项描述。

<van-share-sheet
v-model="showShare"
:options="options"
title="立即分享给好友"
description="描述信息"
/>
export default {
data() {
return {
showShare: false,
options: [
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
{ name: '复制链接', icon: 'link', description: '描述信息' },
{ name: '分享海报', icon: 'poster' },
{ name: '二维码', icon: 'qrcode' },
],
};
},
};

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!