43 lines
884 B
Vue
43 lines
884 B
Vue
<script setup lang="ts">
|
|
const { t } = useI18n();
|
|
const { canInstall, isInstalled, install } = usePWAInstall();
|
|
const installing = ref(false);
|
|
|
|
async function handleInstall() {
|
|
installing.value = true;
|
|
try {
|
|
const success = await install();
|
|
if (success) {
|
|
// 可以显示成功提示
|
|
console.log("PWA 安装成功");
|
|
}
|
|
}
|
|
finally {
|
|
installing.value = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UButton
|
|
v-if="canInstall && !isInstalled"
|
|
:loading="installing"
|
|
size="md"
|
|
icon="i-heroicons-arrow-down-tray"
|
|
@click="handleInstall"
|
|
>
|
|
{{ t('installPWA') }}
|
|
</UButton>
|
|
<UBadge
|
|
v-else-if="isInstalled"
|
|
size="md"
|
|
color="primary"
|
|
variant="subtle"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-check-circle" class="w-5 h-5" />
|
|
{{ t('installed') }}
|
|
</div>
|
|
</UBadge>
|
|
</template>
|