包

@lia-labs/sdk-vue

复制页面

Vue 3 的组合式 API 用于 Lia SDK。 Lia 的状态为只读引用，按钮由引用或获取器驱动。

npm install @lia-labs/sdk @lia-labs/sdk-vue

Vue 3.3 或更高版本。所有内容从 @lia-labs/sdk 被重新导出。每个可组合项在其组件（或效果作用域）消失时停止监听。

#一个应用

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { isLia, mockLia, pay, ready, useBackButton, useClosingConfirmation, useInit, useLanguage, useMainButton } from '@lia-labs/sdk-vue';

if (!isLia()) mockLia();

const lia = useInit();
const language = useLanguage();
const playing = ref(false);

watch(lia.status, (status) => status === 'ready' && ready());
useMainButton(() => !playing.value && { text: 'Buy extra lives', onClick: () => pay('extra-lives') });
useBackButton(computed(() => (playing.value ? () => (playing.value = false) : null)));
useClosingConfirmation(playing);
</script>

<template>
  <h1 v-if="lia.status.value === 'ready'">Hello, @{{ lia.result.value?.player.name }} ({{ language }})</h1>
</template>

#可组合项

可组合的	给你
`useInit(options?)`	`{ status, result, error }` 作为引用。调用 `init()` 一次。
`useSignal(value)`	任何 SDK 值作为只读 ref。
`usePlayer()`, `useMode()`, `useLanguage()`, `useRtl()`, `useColorScheme()`, `useThemeParams()`, `useViewport()`, `useSafeArea()`, `useContentSafeArea()`, `useIsFullscreen()`, `useStartParam()`, `useSoundOn()`, `useNotificationsAllowed()`	Lia'的状态作为只读引用。
`useLiaEvent(event, handler)`	监听 Lia 中的一个'的事件。
`useBannerAd(position?)`, `useBanner()`, `useNativeAd()`	将横幅Lia 靠近您的页面（这会变短以适应它）： `"bottom"`, `"top"`，或者一个ref或getter（`null` 隐藏它）；并且横幅和原生广告现在。
`useMainButton(options)`, `useSecondaryButton(options)`	显示按钮。 `options` 可以是对象、引用或获取器，按钮会跟随它； `null` 或 `false` 隐藏它。
`useBackButton(onBack)`, `useSettingsButton(onOpen)`	显示标题按钮。传递一个函数，或一个函数的引用（`null` 隐藏它）。
`useClosingConfirmation(enabled?)`, `useVerticalSwipesDisabled(disabled?)`	`enabled` 可以是布尔值、引用或获取器。

自动翻译。英语是真实来源。阅读英文