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

TearOffTabs 可撕离 Tab

Tab 拖拽超过阈值时触发 tear-off 事件；消费方决定是 spawn DetachedPanel 还是新窗口。

基础用法

普通 tabs + 拖拽手势。垂直拖动距离超过 tearThreshold（默认 60px）后触发 tear-off(id, item, x, y)。组件本身不实现窗口/面板创建，由消费方决定行为。

orders.ts●

README.md

// orders.ts

<CfTearOffTabs
:tabs="tabs"
v-model="active"
@tear-off="(id) => spawnPanel(id)"
@close="(id) => removeTab(id)"
>
<template #content-orders>orders.ts 内容</template>
</CfTearOffTabs>

<CfTearOffTabs
tabs={tabs}
value={active}
onChange={setActive}
onTearOff={(id) => spawnPanel(id)}
onClose={(id) => removeTab(id)}
slots={{ 'content-orders': <pre>orders.ts</pre> }}
/>

Tear-off 接 DetachedPanel

把撕下的 tab 即刻 spawn 成 DetachedPanel；关闭面板时把 tab 还原回去。

orders.ts●

// orders.ts
拖动这个 tab 向下可触发 tear-off →

<CfTearOffTabs ... @tear-off="tearOff" />
<CfDetachedPanel ... @update:open="reattach" />

<CfTearOffTabs ... onTearOff={tearOff} />
<CfDetachedPanel ... onOpenChange={reattach} />

API

属性	类型	默认值	说明
`tabs`	`TearOffTabItem[]`	—	`{ id, title, contentKey?, modified?, closable? }`
`modelValue` / `value`	`string`	第一个 tab	活动 tab id
`tearThreshold`	`number`	`60`	触发 tear-off 的垂直拖动距离

事件：update:modelValue / tear-off(id, item, x, y) / close(id, item)。