首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 ShareSheet 组件：
<template>
<div>
<!-- 使用 vant-sharesheet 组件 -->
<van-share-sheet
v-model="show"
:options="options"
@select="onSelect"
/>
<!-- 触发分享面板的按钮 -->
<van-button @click="showShareSheet">分享</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { ShareSheet } from 'vant';
export default {
components: {
[ShareSheet.name]: ShareSheet,
},
setup() {
// 使用 ref 创建一个响应式变量，用于控制分享面板的显示和隐藏
const show = ref(false);
// 分享选项
const options = [
{ name: '微信', icon: 'wechat' },
{ name: '微博', icon: 'weibo' },
{ name: 'QQ', icon: 'qq' },
{ name: '复制链接', icon: 'link' },
];
// 点击分享选项时触发的方法
const onSelect = (option) => {
// 在实际应用中，可以根据选项执行相应的分享操作
console.log('选中的选项：', option);
// 隐藏分享面板
show.value = false;
};
// 点击分享按钮时触发的方法，显示分享面板
const showShareSheet = () => {
show.value = true;
};
return {
show,
options,
onSelect,
showShareSheet,
};
},
};
</script>
在这个例子中，我们使用了 van-share-sheet 组件，通过 v-model 控制分享面板的显示和隐藏，通过 :options 属性设置分享选项，通过 @select 事件处理用户点击分享选项的操作。
点击分享按钮时，showShareSheet 方法会被调用，将 show 的值设为 true，显示分享面板。在分享面板中，用户可以点击不同的选项，触发 onSelect 方法，你可以在这个方法中根据选项执行相应的分享操作。
这只是一个简单的示例，你可以根据实际需求自定义分享选项和操作。
转载请注明出处：http://www.zyzy.cn/article/detail/5825/Vant