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

DetachedPanel 浮动面板

可拖拽的浮动面板，Teleport 到 body。配合 TearOffTab / DockLayout 的 detach 动作使用。

基础用法

按住头部即可拖动；resizable 启用浏览器原生 resize。Tauri / Electron 场景里把它转成独立 window 时只需在 tear-off 事件里 spawn 一个新 BrowserWindow / WebView。

背景

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

<template>
  <div class="demo-row">
    <CfButton @click="open = true">弹出浮动面板</CfButton>
    <CfDetachedPanel v-model:open="open" title="Inspector" :width="320" :height="220">
      <div style="font-size: 13px; color: var(--fg-2); line-height: 1.6;">
        拖动顶部把手可以移动面板。<br>
        外部 Tauri/Electron 应用可在 tear-off 事件里把它转换成独立窗口。
      </div>
    </CfDetachedPanel>
  </div>
</template>

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

<template>
  <div class="demo-row">
    <CfButton @click="open = true">弹出浮动面板</CfButton>
    <CfDetachedPanel v-model:open="open" title="Inspector" :width="320" :height="220">
      <div style="font-size: 13px; color: var(--fg-2); line-height: 1.6;">
        拖动顶部把手可以移动面板。<br>
        外部 Tauri/Electron 应用可在 tear-off 事件里把它转换成独立窗口。
      </div>
    </CfDetachedPanel>
  </div>
</template>

<CfDetachedPanel open={open} onOpenChange={setOpen} title="Inspector" width={320}>
<div>面板内容…</div>
</CfDetachedPanel>

<CfDetachedPanel open={open} onOpenChange={setOpen} title="Inspector" width={320}>
<div>面板内容…</div>
</CfDetachedPanel>

多面板共存

可同时打开多个 DetachedPanel；通过 zIndex 显式分层。resizable=true 启用浏览器原生 resize 句柄。

背景

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

<template>
  <div class="demo-row">
    <CfButton @click="a = true">面板 A</CfButton>
    <CfButton variant="secondary" @click="b = true">面板 B（resizable）</CfButton>
    <CfDetachedPanel
      v-model:open="a"
      title="Inspector A"
      :width="280"
      :height="180"
      :z-index="1500"
    >
      <div style="font-size: 12px; color: var(--fg-2);">头部拖动可移动整个面板。</div>
    </CfDetachedPanel>
    <CfDetachedPanel
      v-model:open="b"
      title="Inspector B"
      :width="320"
      :height="220"
      resizable
      :z-index="1501"
    >
      <div style="font-size: 12px; color: var(--fg-2);">右下角可拖拽改变大小（resizable）。</div>
    </CfDetachedPanel>
  </div>
</template>

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

<template>
  <div class="demo-row">
    <CfButton @click="a = true">面板 A</CfButton>
    <CfButton variant="secondary" @click="b = true">面板 B（resizable）</CfButton>
    <CfDetachedPanel
      v-model:open="a"
      title="Inspector A"
      :width="280"
      :height="180"
      :z-index="1500"
    >
      <div style="font-size: 12px; color: var(--fg-2);">头部拖动可移动整个面板。</div>
    </CfDetachedPanel>
    <CfDetachedPanel
      v-model:open="b"
      title="Inspector B"
      :width="320"
      :height="220"
      resizable
      :z-index="1501"
    >
      <div style="font-size: 12px; color: var(--fg-2);">右下角可拖拽改变大小（resizable）。</div>
    </CfDetachedPanel>
  </div>
</template>

<CfDetachedPanel open={a} onOpenChange={setA} width={280} />
<CfDetachedPanel open={b} onOpenChange={setB} resizable />

<CfDetachedPanel open={a} onOpenChange={setA} width={280} />
<CfDetachedPanel open={b} onOpenChange={setB} resizable />

API

属性	类型	默认值	说明
`open` / `v-model:open`	`boolean`	`false`
`title`	`string`	—	头部标题
`x` / `y`	`number`	自动	初始位置
`width` / `height`	`number \| string`	`360 / 240`
`resizable`	`boolean`	`false`	启用原生 resize 句柄
`closable`	`boolean`	`true`
`to`	`string`	`'body'`	Teleport 目标
`zIndex`	`number`	—

事件：update:open / move(x, y)。