Vben Drawer 抽屉

框架提供的抽屉组件，支持自动高度、loading等功能。

如果文档内没有参数说明，可以尝试在在线示例内寻找

写在前面

如果你觉得现有组件的封装不够理想，或者不完全符合你的需求，大可以直接使用原生组件，亦或亲手封装一个适合的组件。框架提供的组件并非束缚，使用与否，完全取决于你的需求与自由。

README

下方示例代码中的，存在一些国际化、主题色未适配问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。

基础用法

使用 useVbenDrawer 创建最基础的模态框。

<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-[600px]" title="基础示例"> drawer content </Drawer>
  </div>
</template>

组件抽离

Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 drawer 内的内容抽离出来，也方便复用。通过 connectedComponent 参数，可以将内外组件进行连接，而不用其他任何操作。

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

import ExtraDrawer from './drawer.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});

function open() {
  drawerApi.open();
}
</script>

<template>
  <div>
    <Drawer />
    <VbenButton @click="open">Open</VbenButton>
  </div>
</template>

自动计算高度

弹窗会自动计算内容高度，超过一定高度会出现滚动条，同时结合 loading 效果以及使用 prepend-footer 插槽。

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

import ExtraDrawer from './drawer.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});

function open() {
  drawerApi.open();
}
</script>

<template>
  <div>
    <Drawer />
    <VbenButton @click="open">Open</VbenButton>
  </div>
</template>

使用 Api

通过 drawerApi 可以调用 drawer 的方法以及使用 setState 更新 drawer 的状态。

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

import ExtraDrawer from './drawer.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});

function open() {
  drawerApi.open();
}

function handleUpdateTitle() {
  drawerApi.setState({ title: '外部动态标题' });
  drawerApi.open();
}
</script>

<template>
  <div>
    <Drawer />

    <VbenButton @click="open">Open</VbenButton>
    <VbenButton class="ml-2" type="primary" @click="handleUpdateTitle">
      从外部修改标题并打开
    </VbenButton>
  </div>
</template>

数据共享

如果你使用了 connectedComponent 参数，那么内外组件会共享数据，比如一些表单回填等操作。可以用 drawerApi 来获取数据和设置数据，配合 onOpenChange，可以满足大部分的需求。

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

import ExtraDrawer from './drawer.vue';

const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});

function open() {
  drawerApi.setData({
    content: '外部传递的数据 content',
    payload: '外部传递的数据 payload',
  });
  drawerApi.open();
}
</script>

<template>
  <div>
    <Drawer />

    <VbenButton @click="open">Open</VbenButton>
  </div>
</template>

注意

• VbenDrawer 组件对与参数的处理优先级是 slot > props > state(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 slot 或者 props，那么 setState 将不会生效，这种情况下你可以通过 slot 或者 props 来更新状态。
• 如果你使用到了 connectedComponent 参数，那么会存在 2 个useVbenDrawer, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 onConfirm，那么以内部的 onConfirm 为准。onOpenChange事件除外，内外都会触发。

API

// Drawer 为弹窗组件
// drawerApi 为弹窗的方法
const [Drawer, drawerApi] = useVbenDrawer({
  // 属性
  // 事件
});

Props

所有属性都可以传入 useVbenDrawer 的第一个参数中。

属性名	描述	类型	默认值
title	标题	string|slot	-
titleTooltip	标题提示信息	string|slot	-
description	描述信息	string|slot	-
isOpen	弹窗打开状态	boolean	false
loading	弹窗加载状态	boolean	false
closable	显示关闭按钮	boolean	true
modal	显示遮罩	boolean	true
header	显示header	boolean	true
footer	显示footer	boolean|slot	true
confirmLoading	确认按钮loading状态	boolean	false
closeOnClickModal	点击遮罩关闭弹窗	boolean	true
closeOnPressEscape	esc 关闭弹窗	boolean	true
confirmText	确认按钮文本	string|slot	确认
cancelText	取消按钮文本	string|slot	取消
showCancelButton	显示取消按钮	boolean	true
showConfirmButton	显示确认按钮文本	boolean	true
class	modal的class，宽度通过这个配置	string	-
contentClass	modal内容区域的class	string	-
footerClass	modal底部区域的class	string	-
headerClass	modal顶部区域的class	string	-

Event

以下事件，只有在 useVbenDrawer({onCancel:()=>{}}) 中传入才会生效。

事件名	描述	类型
onBeforeClose	关闭前触发，返回 false则禁止关闭	()=>boolean
onCancel	点击取消按钮触发	()=>void
onConfirm	点击确认按钮触发	()=>void
onOpenChange	关闭或者打开弹窗时触发	(isOpen:boolean)=>void

Slots

除了上面的属性类型包含slot，还可以通过插槽来自定义弹窗的内容。

插槽名	描述
default	默认插槽 - 弹窗内容
prepend-footer	取消按钮左侧
append-footer	取消按钮右侧

modalApi

事件名	描述	类型
setState	动态设置弹窗状态属性	setState(props) | setState((prev)=>(props))
open	打开弹窗	()=>void
close	关闭弹窗	()=>void
setData	设置共享数据	<T>(data:T)=>void
getData	获取共享数据	<T>()=>T
useStore	获取可响应式状态	-

贡献者

vben

页面历史

最后编辑于 29 天前

查看完整历史

0df8c5c-refactor: reconstruct language files into multi-file structures (#4683)

24d14c2-refactor(adapter): separate form and component adapters so that components adapt to components other than the form (#4628)

df48409-fix: when the api returns 401, the page is refreshed not as expected (#4440)

3f2dcb8-fix(@vben/web-ele): fixed some style issues in dark mode (#4298)

98da067-feat: add archive plug-in to output dist.zip after build (#4272)

36e7ca1-perf: improve modal and drawer component documentation and fix known problems (#4264)