沉浸式状态栏 useImmersive

更新: 2025/1/14 字数: 0 字 时长: 0 分钟

基础使用

说明

useImmersive用于控制沉浸式状态栏。每次更改状态后需退出重启app才能生效。

设置沉浸式状态栏

setImmersive用于设置沉浸式状态栏。接收一个布尔值，true为开启沉浸式状态栏，false为关闭。

import { useImmersive } from "@/hooks";
const { isImmersive, setImmersive } = useImmersive();

点击查看示例代码

<script setup lang="ts">
import { useImmersive } from "@/hooks";
const { isImmersive, setImmersive } = useImmersive();
const checked1 = ref<boolean>(isImmersive.value);

watch(
  () => isImmersive.value,
  (val) => (checked1.value = val),
  { immediate: true },
);
</script>
<template>
  <VanCellGroup inset title="功能">
    <VanCell center :title="t('menus.immersive')">
      <template #right-icon>
        <VanSwitch
          v-model="checked1"
          size="20px"
          aria-label="on/off Dark Mode"
          @click="setImmersive(checked1)"
        />
      </template>
    </VanCell>
  </VanCellGroup>
</template>

API

返回值、方法

返回值、方法	说明	类型
isImmersive	沉浸式状态栏是否开启	Ref<boolean>
setImmersive	设置沉浸式状态栏，接收一个布尔值，true为开启沉浸式状态栏，false为关闭	(value: boolean) => void