Drawer 抽屉

有些时候，对话框并不满足我们的需求，这时可以使用抽屉组件。

基础用法

<template>
  <x-button @click="visible = true">打开抽屉</x-button>
  <x-drawer v-model="visible" title="我是标题">
    <p>我来啦！</p>
  </x-drawer>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
</script>

不同方向

<template>
  <x-button @click="visible = true">从左到右</x-button>
  <x-drawer v-model="visible" direction="ltr">从左到右</x-drawer>
</template>

API

Props

属性	说明	类型	默认值
modelValue	是否显示抽屉	boolean	false
title	抽屉标题	string	—
direction	打开方向	'ltr' | 'rtl' | 'ttb' | 'btt'	'rtl'
size	抽屉大小	string | number	'30%'
withHeader	是否显示标题	boolean	true
showClose	是否显示关闭按钮	boolean	true
closeOnClickModal	点击遮罩层关闭	boolean	true
destroyOnClose	关闭时销毁元素	boolean	false

Events

事件名	说明
update:modelValue	值改变时触发
open	打开时触发
close	关闭时触发