Offcanvas 抽屉

抽屉组件（Offcanvas）用于在视口边缘展示侧边面板，支持左右上下四个方向滑入、<Teleport> 传送、ESC 关闭等交互。

基础用法

通过 v-model 控制抽屉的显示与隐藏。默认从右侧（end）滑入。

查看代码

<script setup lang="ts">
import { ref } from 'vue'
const visible = ref(false)
</script>

<template>
  <button class="btn btn-primary" @click="visible = true">打开基础抽屉</button>
  <TOffcanvas v-model="visible" title="基础抽屉">
    <p>抽屉内容</p>
  </TOffcanvas>
</template>

四个方向

通过 placement 属性控制抽屉从哪个边缘滑入：start（左）、end（右，默认）、top（上）、bottom（下）。

<template>
  <TOffcanvas v-model="visible" title="左侧抽屉" placement="start" />
  <TOffcanvas v-model="visible" title="右侧抽屉" placement="end" />
  <TOffcanvas v-model="visible" title="顶部抽屉" placement="top" />
  <TOffcanvas v-model="visible" title="底部抽屉" placement="bottom" />
</template>

无遮罩层

设置 :backdrop="false" 可移除遮罩层，此时背景内容仍然可操作。

<TOffcanvas v-model="visible" title="无遮罩抽屉" :backdrop="false">
  <template #footer>
    <button class="btn btn-primary" @click="visible = false">关闭</button>
  </template>
</TOffcanvas>

表单内容

抽屉内可放置表单元素，通过 #footer 插槽添加底部操作栏。

查看代码

<TOffcanvas v-model="visible" title="登录表单">
  <div class="mb-3">
    <label class="form-label">用户名</label>
    <input v-model="username" type="text" class="form-control">
  </div>
  <template #footer>
    <button class="btn btn-primary ms-auto" @click="visible = false">提交</button>
  </template>
</TOffcanvas>

API

Props

参数	类型	默认值	说明
modelValue	boolean	false	v-model 绑定值，控制抽屉显示/隐藏
placement	'start' | 'end' | 'top' | 'bottom'	'end'	弹出方向
title	string	—	抽屉标题
closable	boolean	true	是否显示关闭按钮
closeOnBackdrop	boolean | 'static'	true	点击遮罩层是否关闭；设为 'static' 则不关闭
closeOnEsc	boolean	true	按 ESC 键是否关闭
backdrop	boolean	true	是否显示遮罩层
scroll	boolean	false	是否允许 body 滚动
teleportTo	string	'body'	Teleport 传送目标选择器

Slots

名称	说明
default	抽屉主体内容
title	自定义标题区域
header	自定义整个头部（替换默认标题 + 关闭按钮）
footer	底部操作栏（会添加边框分隔）

Emits

事件	参数	说明
update:modelValue	(value: boolean)	v-model 更新事件
open	—	抽屉开始打开时触发
opened	—	抽屉打开动画完成后触发
close	—	抽屉开始关闭时触发
closed	—	抽屉关闭动画完成后触发