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>

import { useRoute } from 'vue-router'
const route = useRoute()
const title = route.query.title//若页面存在一进页面需要有父组件的某个参数，而接口获取不到的可使用query来传参
const flag = ref(history?.state?.flag)//若像是飞书应用自带分享功能，要实现app使用自己写的分享功能，飞书使用自带的分享功能，则需要将自己的分享代码隐藏掉，此时可使用state来判断是否从上一级父组件进来，因为分享的是页面链接，分享后的页面是不存在上一级父页面的，或实现分享后的页面隐藏部门按钮
const show = ref(false) //分享弹窗开启标识
const options = [{ name: '复制链接', icon: 'link' }] //页面分享选项
//返回
const onClickLeft = () => {
  router.back()
}
//分享
const onClickRight = () => {
  show.value = true
}
//分享链接
const share = option => {
  navigator.clipboard
    .writeText(window.location.href)
    .then(() => {
      showToast('复制链接')
    })
    .catch(error => {
      console.error('复制失败:', error)
    })
}

const isShowNov = ref(false)
onMounted(() => {
  const title = route.query.title
  //判断是否是飞书环境
  if (window.h5sdk) {
    router.replace({
      path: 'videoTutorials',
      name: 'videoTutorials',
      component: () => import('@/views/digitalCollaboration/videoTutorials.vue'),
      query: { title: title }, // 添加查询参数
      meta: { title: title, keepAlive: false }
    })
    isShowNov.value = true
  }
})


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