Vben Drawer

Vben Drawer is the shared drawer wrapper used by the framework. It supports auto-height layout, loading state, connected components, and an imperative API similar to the modal API.

Basic Usage

const [Drawer, drawerApi] = useVbenDrawer({
  // props
  // events
});

vue

<script lang="ts" setup>
import { useVbenDrawer, VbenButton } from '@vben/common-ui';

const [Drawer, drawerApi] = useVbenDrawer();
</script>
<template>
  <div>
    <VbenButton @click="() => drawerApi.open()">Open</VbenButton>
    <Drawer class="w-150" title="基础示例"> drawer content </Drawer>
  </div>
</template>

Current Usage Notes

If you use connectedComponent, the inner and outer components share data through drawerApi.setData() and drawerApi.getData().
Default drawer behavior can be adjusted in apps/<app>/src/bootstrap.ts through setDefaultDrawerProps(...).
setState(...) works on DrawerState, not ModalState.

Key Props

Prop	Description	Type
`appendToMain`	mount inside the main content area instead of `body`	`boolean`
`connectedComponent`	connect an inner component to the drawer wrapper	`Component`
`closeIconPlacement`	position of the close icon	`'left' \| 'right'`
`placement`	drawer side	`'left' \| 'right' \| 'top' \| 'bottom'`
`overlayBlur`	blur amount for the overlay	`number`
`submitting`	lock drawer interactions while submitting	`boolean`

Events

Event	Description	Type
`onBeforeClose`	called before close; returning `false` or rejecting prevents close	`() => Promise<boolean \| undefined> \| boolean \| undefined`
`onOpenChange`	called when open state changes	`(isOpen: boolean) => void`
`onOpened`	called after open animation completes	`() => void`
`onClosed`	called after close animation completes	`() => void`

drawerApi

Method	Description
`setState(...)`	updates drawer state
`open()`	opens the drawer
`close()`	closes the drawer
`setData(data)`	stores shared data
`getData<T>()`	reads shared data
`lock(isLocked = true)`	locks the drawer into submitting state
`unlock()`	alias for `lock(false)`

Contributors

xingyu4j

Changelog

Last edited 10 days ago

View full history

Vben Drawer ​

Basic Usage ​

Current Usage Notes ​

Key Props ​

Events ​

drawerApi ​