VueUse:如何多次使用isSupported变量？
VueUse:如何多次使用isSupported变量？
提问于 2022-11-22 14:38:29
我想做一个分享按钮的退路。
- 如果useShareDialog isSupported = ShareDialog打开
- 如果useShareDialog !isSupported =复制到剪贴板
- 如果useClipboard !isSupported =不要显示共享按钮
VueUse具有useShare和useClipboard函数。但是，这两个变量都使用相同的变量来检查isSupported变量是否支持该函数。
我怎么能把他们分开？
Vue元件
<script setup>
import {
useClipboard, useShare
} from '@vueuse/core'
const { share, isSupported } = useShare({
title: 'Marcus Universe Portfolio',
text: 'Look at my awesome portfolio',
url: 'https://marcus-universe.de',
})
const {copy, copied, isSupported} = useClipboard({
source: 'https://marcus-universe.de'
})
function shareTrigger() {
if(isSupported) {
share()
} else {
copy()
}
}
</script>
<template>
<button
class="shareButtons"
@click="shareTrigger()"
v-if="isSupported">
{{ copied ? 'copied to clipboard' : 'Share' }}
</button>
</template>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-22 14:43:28
您可以重命名变量：
const { share, isSupported: isSupportedShare } = useShare({...})
const {copy, copied, isSupported: isSupportedClipboard} = useClipboard({...})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74534384
复制相关文章
相似问题
腾讯云开发者
