Drawer 抽屉

从屏幕边缘滑出的面板，适合表单与详情。

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { DanButton, DanDrawer } from '@dandan-ui/ui'

const open = ref(false)
</script>

<template>
  <DanButton type="primary" @click="open = true">打开抽屉</DanButton>
  <DanDrawer v-model="open" title="抽屉标题" size="360px">
    这里是抽屉内容，适合放表单或详情。
    <template #footer>
      <DanButton @click="open = false">取消</DanButton>
      <DanButton type="primary" @click="open = false">确定</DanButton>
    </template>
  </DanDrawer>
</template>

Props

属性	说明	类型	默认值
modelValue / v-model	是否显示	boolean	false
title	标题	string	''
size	宽度或高度	string	'30%'
direction	方向	'rtl' | 'ltr' | 'ttb' | 'btt'	'rtl'
showClose	显示关闭按钮	boolean	true
closeOnClickModal	点击遮罩关闭	boolean	true
closeOnPressEscape	Esc 关闭	boolean	true
destroyOnClose	关闭后销毁	boolean	false
withHeader	是否显示头部	boolean	true