Drawer 抽屉

从屏幕边缘滑出的面板组件，常用于设置、表单与补充信息展示。

基础用法

Basic Drawer

最常见的抽屉用法。

示例即将加载...

<template>
  <TxButton @click="visible1 = true">打开抽屉</TxButton>
  <TxDrawer v-model:visible="visible1" title="设置">
    <p>这是抽屉的内容区域，你可以在这里放置任何内容。</p>
    <p>支持自定义宽度、方向和关闭行为。</p>
  </TxDrawer>
</template>

方向

抽屉可以从左侧或右侧滑入。

Direction

左右方向抽屉。

示例即将加载...

<template>
  <TxButton @click="visible2 = true">左侧抽屉</TxButton>
  <TxButton @click="visible3 = true">右侧抽屉</TxButton>
  <TxDrawer v-model:visible="visible2" title="左侧抽屉" direction="left">
    <p>从左侧滑入的抽屉</p>
  </TxDrawer>
  <TxDrawer v-model:visible="visible3" title="右侧抽屉" direction="right">
    <p>从右侧滑入的抽屉（默认）</p>
  </TxDrawer>
</template>

自定义宽度

Custom Width

可设置固定宽度。

示例即将加载...

<template>
  <TxButton @click="visible4 = true">自定义宽度 (400px)</TxButton>
  <TxDrawer v-model:visible="visible4" title="固定宽度抽屉" width="400px">
    <p>这个抽屉的宽度是固定的 400px</p>
  </TxDrawer>
</template>

底部插槽

使用 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>

API

属性

属性名	类型	说明
visible		控制抽屉可见性
title		头部显示的标题
width		抽屉宽度
direction	leftright	抽屉出现的方向
showClose		是否显示关闭按钮
closeOnClickMask		点击遮罩时关闭
closeOnPressEscape		按 Escape 键时关闭
zIndex		自定义 z-index

事件

属性名	默认值	说明
update:visible	-	可见性变化时触发
open	-	抽屉打开时触发
close	-	抽屉关闭时触发

插槽

属性名	类型	默认值	说明
default	-	-	抽屉主内容
footer	-	-	底部内容区域

交互契约

Drawer 根节点暴露 role="dialog"、aria-modal="true"，并通过实例级 aria-labelledby 关联标题。
打开时聚焦抽屉根节点；隐藏或卸载时恢复到打开前的焦点元素。
关闭按钮、遮罩点击和 Escape 默认都会触发 update:visible(false) 与 close；closeOnClickMask=false 或 closeOnPressEscape=false 会分别阻断对应关闭路径。
showClose=false 会移除关闭按钮，但不影响遮罩和 Escape 的配置化关闭能力。