# 抽屉

来源快照：`result_data_new_260518.json`

- 来源 ID：`1183667809788829710`
- 模块：低代码平台e-builder
- 目录：页面引擎 - 页面设计器 - 页面组件 - 基础组件 - 基础组件/容器类
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

## 一、功能背景

随着用户场景的搭建，抽屉组件旨在帮助客户在当前eb页面可以快速打开一个确认对话框或反馈提示等窗口。

## 二、功能概述

可以在当前eb页面可以侧滑或者弹窗的方式打开一个容器区域，可以拖入eb组件形成一个复合的大组件。

## 三、场景介绍

在页面设计器上使用抽屉组件，可以快速打开一个确认对话框或着侧滑打开一个弹窗区域，可以快速搭建弹窗或者侧滑内容区域的内容。

在使用抽屉组件时，通常默认状态抽屉组件是隐藏的，在需要使用的时候，通过配置点击事件动作-显示/隐藏组件，打开抽屉组件。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340829068689410&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 四、功能说明

1、

### 组件配置属性

#### 1.1 位置设置

1）支持居中、顶部居中、底部居中、右居中、左居中、自定义6种位置，同时支持高度、宽度、定位设置。

2）高度宽度设置：支持自定义设置抽屉组件的宽高，支持px或%两种方式。

3）定位：默认为当前页面，可选全局。选当前页面时，遮罩层只针对当前页面，不包括系统导航。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340829137895436&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 1.2动效设置

支持设置抽屉组件显示动效、动效时常、自动关闭。

1）动效设置：显示动效支持：弹出，推出，滑出3种方式，自定义或居中时只支持弹出和滑出。

2）动效方向：根据显示动效，可配置动效方向支持来自左侧，右侧，顶部，底部。

动效时长，默认200ms 。

3）支持设置弹窗自动关闭及停留时长。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340829115990033&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

#### 1.3遮罩层设置

1）支持是否显示遮罩层、是否点击遮罩或组件外可关闭。

2、

### 前台运行效果

![](https://weapp.eteams.cn/papi/file/preview?fileId=1163340833304936451&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

## 五、上下游关联功能点

1、

[组件样式](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?id=1159789238918479919&freepass_doc=1&space_id=1157961794811633670 "组件样式")

2、

[组件事件动作](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?freepass_doc=1&id=1159192088358584536&space_id=1157961794811633670 "组件事件动作")

3、

[组件权限](https://weapp.eteams.cn/sp/ebdpage/view/freepass/1152863419640021002?freepass_doc=1&id=1159789964944113758&space_id=1157961794811633670 "组件权限")
