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

Drawer 抽屉

Modal 的边缘变体 —— 从上下左右滑入，自带 portal / focus trap / 滚动锁 / Esc 关闭。

基础用法

v-model:open (Vue) / open + onOpenChange (React) 双向绑定。Drawer 共用 Modal 的 portal / focus trap / body 滚动锁 / Esc 关闭基础设施。

<script setup lang="ts">
import { ref } from 'vue';
import { CfButton, CfDrawer } from '@chufix-design/vue';

const open = ref(false);
</script>

<template>
<CfButton @click="open = true">打开抽屉</CfButton>
<CfDrawer v-model:open="open" title="基础抽屉">
  <p>从右侧滑入。按 Esc 或点击遮罩关闭。</p>
  <template #footer>
    <CfButton variant="ghost" @click="open = false">取消</CfButton>
    <CfButton @click="open = false">确定</CfButton>
  </template>
</CfDrawer>
</template>

import { useState } from 'react';
import { CfButton, CfDrawer } from '@chufix-design/react';

export default function Demo() {
const [open, setOpen] = useState(false);
return (
  <>
    <CfButton onClick={() => setOpen(true)}>打开抽屉</CfButton>
    <CfDrawer
      open={open}
      onOpenChange={setOpen}
      title="基础抽屉"
      footer={
        <>
          <CfButton variant="ghost" onClick={() => setOpen(false)}>取消</CfButton>
          <CfButton onClick={() => setOpen(false)}>确定</CfButton>
        </>
      }
    >
      <p>从右侧滑入。</p>
    </CfDrawer>
  </>
);
}

4 种滑入方向

placement 决定从哪一边滑入 — 右（默认，最常见的详情侧栏）/ 左（移动端导航）/ 顶 / 底（中文输入面板风格的临时操作）。

<CfDrawer v-model:open="right" title="右侧抽屉" placement="right" />
<CfDrawer v-model:open="left" title="左侧抽屉" placement="left" />
<CfDrawer v-model:open="top" title="顶部抽屉" placement="top" />
<CfDrawer v-model:open="bottom" title="底部抽屉" placement="bottom" />

<CfDrawer open={right} onOpenChange={setRight} title="右侧抽屉" placement="right" />
<CfDrawer open={left} onOpenChange={setLeft} title="左侧抽屉" placement="left" />
<CfDrawer open={top} onOpenChange={setTop} title="顶部抽屉" placement="top" />
<CfDrawer open={bottom} onOpenChange={setBottom} title="底部抽屉" placement="bottom" />

5 档尺寸

size 控制抽屉宽度（左右 placement）或高度（上下 placement） — sm / md（默认）/ lg / xl / full（全屏）。

<CfDrawer v-model:open="sm" title="size = sm" size="sm" />
<CfDrawer v-model:open="md" title="size = md" size="md" />
<CfDrawer v-model:open="lg" title="size = lg" size="lg" />
<CfDrawer v-model:open="xl" title="size = xl" size="xl" />
<CfDrawer v-model:open="full" title="size = full" size="full" />

<CfDrawer open={sm} onOpenChange={setSm} title="size = sm" size="sm" />
<CfDrawer open={md} onOpenChange={setMd} title="size = md" size="md" />
<CfDrawer open={lg} onOpenChange={setLg} title="size = lg" size="lg" />
<CfDrawer open={xl} onOpenChange={setXl} title="size = xl" size="xl" />
<CfDrawer open={full} onOpenChange={setFull} title="size = full" size="full" />

锁死关闭路径

表单 / 长流程里有时不希望误触关闭。三个开关全部置 false 让用户必须通过底部按钮显式提交或取消：

closeOnOverlay={false} —— 点击遮罩不关
closeOnEsc={false} —— Esc 不关
showClose={false} —— 隐藏右上角 ×

<CfDrawer
v-model:open="open"
title="表单填写中"
:close-on-overlay="false"
:close-on-esc="false"
:show-close="false"
>
<template #footer>
  <CfButton variant="ghost" @click="open = false">取消</CfButton>
  <CfButton @click="open = false">提交</CfButton>
</template>
</CfDrawer>

<CfDrawer
open={open}
onOpenChange={setOpen}
title="表单填写中"
closeOnOverlay={false}
closeOnEsc={false}
showClose={false}
footer={
  <>
    <CfButton variant="ghost" onClick={() => setOpen(false)}>取消</CfButton>
    <CfButton onClick={() => setOpen(false)}>提交</CfButton>
  </>
}
/>

API · Props

属性	类型	默认值	说明
`open`	`boolean`	`false`	是否展开。Vue 用 `v-model:open`，React 用 `open + onOpenChange`
`placement`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'right'`	滑入方向
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	左右控制宽度，上下控制高度
`title`	`string`	`—`	标题文案，等价于具名 slot `header`
`closeOnOverlay`	`boolean`	`true`	点击遮罩关闭
`closeOnEsc`	`boolean`	`true`	Esc 关闭
`showClose`	`boolean`	`true`	右上角关闭按钮

API · Slots / 子节点

名称	说明
`default`	抽屉主体内容
`header`	自定义标题区，覆盖 `title`
`footer`	底部操作区，通常放取消 / 确定按钮