Drawer 抽屉

用法

基础

打开上层确认框后，Tab 留在确认框内，Escape 只关闭确认框。

方向

direction 支持四个方向；左右时 size 是宽度，上下时是高度。

尺寸与全屏

size 接受数字（px）、CSS 长度、百分比或 'full'；full 等价于 size="full"。

头尾插槽与遮罩

header、footer 插槽接收 close；maskEffect 设置遮罩效果，panelTransparent 让面板透出背部内容。

表单

不需要 close 时，footer 插槽可以直接改写外部状态。

<template>
  <TxDrawer v-model:visible="visible" title="表单">
    <form>
      <input type="text" placeholder="姓名" />
    </form>

    <template #footer>
      <TxButton @click="visible = false">取消</TxButton>
      <TxButton type="primary" @click="handleSave">保存</TxButton>
    </template>
  </TxDrawer>
</template>

关闭行为

<template>
  <!-- 点击遮罩不关闭 -->
  <TxDrawer v-model:visible="visible" title="持久化" :close-on-click-mask="false">
    <p>只能通过关闭按钮关闭</p>
  </TxDrawer>

  <!-- Escape 不关闭 -->
  <TxDrawer v-model:visible="visible2" title="禁用 Escape" :close-on-press-escape="false">
    <p>Escape 键不会关闭此抽屉</p>
  </TxDrawer>
</template>

开关事件

<template>
  <TxDrawer v-model:visible="visible" title="事件示例" @open="handleOpen" @close="handleClose">
    <p>内容</p>
  </TxDrawer>
</template>

后台导航

Tabs 固定一级分区，DropdownMenu 承载轻量操作，Popover 放短说明，高密度配置放进 Drawer。

最佳实践

• 长表单、审计明细、权限矩阵和需要 Footer 操作区的流程放进 Drawer，不要塞进 Popover。
• 即使 showHeader=false 也提供有意义的 title，它是对话框的无障碍名称。
• 用 size 或 full 设置尺寸；width 只为旧调用点保留。
• 只有在小屏上保持侧向进入比底部弹出更重要时，才设置 mobileAdapt=false。
• 焦点由抽屉管理，外层不要再手动抢焦点；正文的表单字段仍需明确的 label。

API 参考

属性

事件

插槽

概述

• 根节点为 role="dialog"、aria-modal="true"；渲染 Header 时用 aria-labelledby 关联标题，否则以 title 作为 aria-label。
• 打开时聚焦抽屉，Tab 在抽屉内循环；关闭或卸载时焦点回到打开前的元素。
• 关闭按钮、遮罩与 Escape 都派发 update:visible(false) 与 close；closeOnClickMask、closeOnPressEscape 分别关闭后两条路径。
• 只有最上层的模态对话框响应 Tab 与 Escape，已被其他控件处理的按键会被忽略，因此上层确认框独占这些按键。
• 关闭后根节点仍留在 DOM 中，并设置 inert 与 aria-hidden。

技术实现

• 头尾分隔线复用 TxDivider，不要再为它们硬编码边框。
• 源码：packages/tuffex/packages/components/src/drawer/。