Tui

Drawer 抽屉组件

Drawer 用于在当前页面弹出，常用于展示信息、操作确认或承载交互表单。

基础用法

最简单的用法，通过 v-model 控制模态框的显示和隐藏。

示例代码

vue

<template>
  <TsButton @click="handleOpenDrawerPlacement('bottom')">打开抽屉 bottom</TsButton>
  <TsButton @click="handleOpenDrawerPlacement('right')">打开抽屉 right</TsButton>
  <TsButton @click="handleOpenDrawerPlacement('top')">打开抽屉 top</TsButton>
  <TsButton @click="handleOpenDrawerPlacement('left')">打开抽屉 left</TsButton>

  <TsDrawer v-model="drawerOpen" :placement="drawerPlacement" />
</template>

属性 Props

modelValue

是否显示

Boolean

false

width

宽度

String

400px

height

高度

String

auto

closeOnClickMask

点击遮罩层是否关闭

Boolean | String | Null

true

showClose

是否显示关闭按钮

Boolean

true

placement

抽屉位置

top | right | bottom | left

right

事件 Events

关闭事件

插槽 Slots

default

自定义 content 内容

自定义 close 按钮内容