Drawer

Drawer-style container dialog box, unlike Modal, is displayed at the edge of the screen. The interaction will not be forced to be modal. In terms of usage scenarios, it is more inclined to be used as a display of information or light interactive content

Examples

Drawer dialog

import { DialogDrawer, DialogAlert } from 'v-dialogs'
import UserProfile from './UserProfile.vue'

DialogDrawer(UserProfile, {
  width: 700,
  title: 'User Profile',
  placement: 'left',
  params: {
    userId: 1,
    userName: 'Terry Zeng'
  },
  callback: data => {
    DialogAlert(`Received message: ${data}`)
  }
})

UserProfile.vue file content

<template>
  <div>
    <div>User name: {{ profile.name }}</div>
    <div>User age: {{ profile.age }}</div>

    <button
      type="button"
      @click="close"
    >Close</button>
  </div>
</template>

<script setup>
import { getUserProfile } from './data'
// declare `close` event
const emit = defineEmits(['close'])

const profile = getUserProfile()
// emit `close` event to close Drawer dialog
const close = () => emit('close', profile.name)
</script>

Placement

Top

Bottom

Left

Right

UI customization

DialogDrawer(component, { backdrop: false })
DialogDrawer(component, { closeButton: false })
DialogDrawer(component, { header: false })
DialogDrawer(component, { backdropClose: false })

Component form

In addition to the functional opening method, v-dialogs also supports the component opening method. You only need to wrap the component in the DialogDrawerBox component, and the corresponding configuration items can be directly passed in as props

<template>
  <div>
    <DialogDrawerBox
      v-model:visible="visible"
      :header="false"
    >
      <MyComponent @close="close" />
    </DialogDrawerBox>

    <button
      type="button"
      @click="visible = true"
    >
      Open component in drawer
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { DialogDrawerBox } from 'v-dialogs'

import MyComponent from './MyComponent.vue'

const visible = ref(false)

function close () {
  visible.value = false
}
</script>

API

type ComponentResult = VNode | Component
type ComponentContent = ComponentResult | (() => ComponentResult)

function DialogDrawer(
  component: ComponentContent,
  options?: DrawerOptions
): Function

The setting options DrawerOptions details

interface DrawerOptions {
  /**
   * Custom class name
   */
  customClass?: string
  /**
   * Display the header
   * @default true
   */
  header?: boolean
  /**
   * The title text displayed in header
   */
  title?: string
  /**
   * Dialog width
   */
  width?: number
  /**
   * Dialog height
   */
  height?: number
  /** The parameters pass to component as props */
  params?: Record<string, unknown>
  /**
   * The close dialog button in header
   * @default true
   */
  closeButton?: boolean
  /**
   * The drawer dialog placement
   * @default 'right'
   */
  placement?: 'left' | 'right' | 'top' | 'bottom'
  /**
   * Display the dialog background overlay
   * @default true
   */
  backdrop?: boolean
  /**
   * Click backdrop to close dialog
   * @default true
   */
  backdropClose?: boolean
}