VueUse：如何区分useShare与useClipboard的isSupported变量？

你遇到的核心问题是解构时变量名重复，直接给两个isSupported重命名就能解决，同时调整逻辑实现你的降级需求：

关键修改点 #

• 解构时用as关键字给两个兼容性标识分别命名，避免冲突
• 调整触发函数的判断逻辑，优先使用系统分享，降级到剪贴板
• 按钮显示条件改为分享或剪贴板至少一个支持

修改后的完整代码 #

<script setup>
import { useClipboard, useShare } from '@vueuse/core'

// 给useShare的isSupported重命名为shareIsSupported
const { share, isSupported: shareIsSupported } = useShare({
  title: 'Marcus Universe Portfolio',
  text: 'Look at my awesome portfolio',
  url: 'https://marcus-universe.de',
})

// 给useClipboard的isSupported重命名为clipboardIsSupported
const { copy, copied, isSupported: clipboardIsSupported } = useClipboard({
  source: 'https://marcus-universe.de'
})

function shareTrigger() {
  // 优先使用系统分享功能
  if (shareIsSupported) {
    share()
  } 
  // 系统分享不支持则用剪贴板复制
  else if (clipboardIsSupported) {
    copy()
  }
}
</script>

<template>
  <!-- 只要分享或剪贴板有一个支持就显示按钮 -->
  <button 
    class="shareButtons"
    @click="shareTrigger()" 
    v-if="shareIsSupported || clipboardIsSupported">
    {{ copied ? 'copied to clipboard' : 'Share' }}
  </button>
</template>

逻辑说明 #

1. 当浏览器支持系统分享API时，点击按钮会唤起原生分享弹窗
2. 系统分享不支持时，自动触发剪贴板复制链接
3. 只有当两个功能都不支持时，按钮才会隐藏

内容的提问来源于stack exchange，提问作者Marcus Harting