Drawer

A simple drawer used for display or quick opening. It can be used to show information or dynamically create and insert content.

Basic Usage

The simplest usage: show/hide the dialog by controlling the property value.

<template>
  <div>
    <b-button type="primary" @click="value = true">open</b-button>
    <b-drawer v-model="value" title="Drawer Title">
      <p>Drawer content goes here</p>
    </b-drawer>
  </div>
</template>

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

Open from Left

Set placement="left" to open from the left side

<template>
  <div>
    <b-button type="primary" @click="value = true">Open from Left</b-button>
    <b-drawer v-model="value" title="drawerTitle" placement="left" width="500px">
      <p>I am the left-side drawer</p>
    </b-drawer>
  </div>
</template>

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

inner Mode

Can set inner mode to open within a specific container

<template>
  <div
    style="position: relative; height: 400px; background: #eee; border: 1px solid #eee; z-index: 2"
  >
    <b-button type="primary" @click="valueInner = true">Inner Drawer</b-button>
    <b-drawer v-model="valueInner" title="Inner Drawer" :lock-scroll="false" inner :z-index="10">
      <p>I am the inner drawer</p>
    </b-drawer>
  </div>
</template>

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

Info Preview Box

<template>
  <div>
    <b-button type="primary" @click="value = true">Info Preview</b-button>
    <b-drawer v-model="value" :show-close="false" width="640">
      <p :style="pStyle">User Info</p>
      <p :style="pStyle">Personal Info</p>
      <div class="demo-drawer-profile">
        <p flex="box:mean" class="mb-10">
          <span>Name: wangbin</span>
          <span>Phone: +86 1762516xxxx</span>
        </p>
        <p flex="box:mean" class="mb-10">
          <span>City: XuzhouCity</span>
          <span>District: Gulou District</span>
        </p>
        <p flex="box:mean" class="mb-10">
          <span>Date of Birth: 1990-04</span>
          <span>Occupation: Web Frontend</span>
        </p>
      </div>
      <b-divider></b-divider>
      <p :style="pStyle">Company</p>
      <div class="demo-drawer-profile">
        <p flex="box:mean" class="mb-10">
          <span>Name: xxxx Co., Ltd.</span>
          <span>Phone: +86 1762516xxxx</span>
        </p>
        <p flex="box:mean" class="mb-10">
          <span>Address: No.88, xx Street, xx District, Xuzhou City</span>
          <span>Phone: +86 1762516xxxx</span>
        </p>
      </div>
      <b-divider></b-divider>
      <p :style="pStyle">Contact Us</p>
      <div class="demo-drawer-profile">
        <p flex="box:mean" class="mb-10">
          <span>Email: 316281400@qq.com</span>
          <span>Phone: +86 1762516xxxx</span>
        </p>
        <p class="mb-10">
          github:
          <a href="https://github.com/wangbin3162/bin-ui-design" target="_blank">
            https://github.com/wangbin3162/bin-ui-design-design
          </a>
        </p>
      </div>
    </b-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(false)

const pStyle = {
  fontSize: '16px',
  color: 'rgba(0,0,0,0.85)',
  lineHeight: '24px',
  marginBottom: '16px'
}
</script>

Nestingdrawer

Drawers can be nested within each other, but this is generally not recommended to avoid too many z-index levels affecting user interaction.

<template>
  <div>
    <b-button type="primary" @click="value = true">Opendrawer</b-button>
    <b-drawer v-model="value" title="First Level Drawer" width="512" :show-close="false">
      <b-button type="primary" @click="value1 = true">Open Second Level Drawer</b-button>
    </b-drawer>
    <b-drawer v-model="value1" title="Second Level Drawer" :show-close="false">This is the second level drawer</b-drawer>
  </div>
</template>

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

DraggableWidth

Can set dragdrawer

<template>
  <div>
    <b-button type="primary" @click="value = true">open</b-button>
    <b-drawer v-model="value" title="drawerTitle" draggable>
      <p>I am the drawer content</p>
    </b-drawer>
  </div>
</template>

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

Props

Parameter	Description	Type	Options	Default
modelValue	Whether to show; use v-model for two-way binding	Boolean	—	false
title	Title. If a custom header slot is used, the title prop is ignored.	String	—	—
placement	Direction	String	left/right	right
append-to-body	Whether to append the dialog to the body	Boolean	—	false
width	Drawer width	Number	—	300
min-width	Drawer minimum width	Number	—	300
show-close	Whether to show close button	Boolean	—	true
mask-closable	Allow clicking the mask to close	Boolean	—	true
mask	Whether to show mask	Boolean	—	true
styles	Drawer middle layer styles	Object	—	—
inner	Whether to set the drawer to open within a specific element. When enabling this property, disable append-to-body property	Boolean	—	false
draggable	Enable drag to adjust width	Boolean	—	false
before-close	Event before closing; return a Promise to prevent closing	Function
lock-scroll	Whether to lock scrolling	Boolean	—	true

Events

Event Name	Description	Return Value
close	Triggers when drawer closes	—
resize-width	Adjust width	—

Slot

Name	Description
header	Custom header
close	Close button
default	Drawer body content

Drawer ​

Basic Usage ​

Open from Left ​

inner Mode ​

Info Preview Box ​

Nestingdrawer ​

DraggableWidth ​

Props ​

Events ​

Slot ​