vue3+vant实现自定义导航栏组件右侧分享功能实现

1、效果图

2、

//导航组件
<van-nav-bar
    title="飞书项目管理"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  >
//插槽实现自定义分享图标
    <template #right>
      <img class="right_img" src="@/assets/image/分享.png" />
    </template>
</van-nav-bar>
//分享组件
<ShareSheet
  v-model:show="show"
  :options="options"//分享组件选项
  @select="share"//分享脚本
  class="van-share-sheet__option"//分享组件选项自定义样式
>
</ShareSheet>


const show = ref(false) //分享弹窗开启标识
const options = [{ name: '复制链接', icon: 'link' }] //页面分享选项
//返回
const onClickLeft = () => {
  router.back()
}
//分享
const onClickRight = () => {
  show.value = true
}
//分享链接
const share = option => {
  showToast('复制链接')
}


:deep(.van-share-sheet__option) {
  margin: 0 auto;
}