开发预览更新于 2026-05-10

FloatingInspector 浮动检查器

角落锚定的可折叠检查器面板，常用于性能监视、调试信息浮窗。

基础用法

锚定到屏幕四角，offset 控制与边缘距离。点击头部 caret 折叠 / 展开（保持标题可见）。

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(false);
</script>

<template>
  <div class="demo-row">
    <CfButton @click="open = !open">{{ open ? '关闭' : '打开' }} 检查器</CfButton>
    <CfFloatingInspector
      :open="open"
      placement="bottom-right"
      title="Inspector"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(false);
</script>

<template>
  <div class="demo-row">
    <CfButton @click="open = !open">{{ open ? '关闭' : '打开' }} 检查器</CfButton>
    <CfFloatingInspector
      :open="open"
      placement="bottom-right"
      title="Inspector"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

<CfFloatingInspector
open={open}
onOpenChange={setOpen}
placement="bottom-right"
title="性能"
>
<ul>...</ul>
</CfFloatingInspector>

<CfFloatingInspector
open={open}
onOpenChange={setOpen}
placement="bottom-right"
title="性能"
>
<ul>...</ul>
</CfFloatingInspector>

4 个角落 + 关闭

4 种 placement 切换效果；点击”关闭”演示 onOpenChange。

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
import type { InspectorPlacement } from '@chufix-design/vue';
const open = ref(true);
const placement = ref<InspectorPlacement>('bottom-right');
const placements: InspectorPlacement[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
</script>

<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfButton v-for="p in placements" :key="p" size="sm" @click="placement = p; open = true">{{ p }}</CfButton>
    <CfButton variant="tertiary" size="sm" @click="open = false">关闭</CfButton>
    <CfFloatingInspector
      :open="open"
      :placement="placement"
      :title="placement"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfFloatingInspector, CfButton } from '@chufix-design/vue';
const open = ref(true);
const placement = ref<InspectorPlacement>('bottom-right');
const placements= ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
</script>

<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfButton v-for="p in placements" :key="p" size="sm" @click="placement = p; open = true">{{ p }}</CfButton>
    <CfButton variant="tertiary" size="sm" @click="open = false">关闭</CfButton>
    <CfFloatingInspector
      :open="open"
      :placement="placement"
      :title="placement"
      @update:open="(v) => open = v"
    >
      <ul style="margin: 0; padding-left: 16px; font-size: 12px; color: var(--fg-2);">
        <li>FPS: 60</li>
        <li>Render: 4.2ms</li>
        <li>Paint: 1.8ms</li>
        <li>Layout: 0.4ms</li>
      </ul>
    </CfFloatingInspector>
  </div>
</template>

<CfFloatingInspector open={open} onOpenChange={setOpen} placement="top-right" />

<CfFloatingInspector open={open} onOpenChange={setOpen} placement="top-right" />

API

属性	类型	默认值	说明
`open`	`boolean`	`true`
`collapsed`	`boolean`	`false`	折叠状态
`placement`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`
`title`	`string`	—
`width`	`number \| string`	`320`
`offset`	`number`	`24`	距视口边缘 px
`closable`	`boolean`	`true`