Я хочу сделать запасной вариант для кнопки «Поделиться».
VueUse имеет функции useShare и useClipboard. Но оба используют одну и ту же переменную, чтобы проверить, поддерживается ли функция с помощью переменной isSupported
.
Как я могу их разделить?
<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>
Вы можете переименовать переменную:
const { share, isSupported: isSupportedShare } = useShare({...})
const {copy, copied, isSupported: isSupportedClipboard} = useClipboard({...})