1. docs
sss
  • docs
    • docs
      • EleProLayout 高级布局组件使用文档
      • Markdown - ByteMdEditor
      • 下拉菜单 - EleDropdown
      • 主题功能
      • 二维码 - EleQrcode
      • 全局配置 - EleConfigProvider
      • 其他功能
      • 分段器 - EleSegmented
      • 分页组件 - ElePagination
      • 加载中 - EleLoading
      • 包裹组件 - EleApp
      • 卡片组件 - EleCard
      • 可选卡片 - EleCheckCard
      • 图标选择 - EleIconSelect
      • 富文本 - TinymceEditor
      • 导航菜单 - EleMenus
      • 工具方法与表单数据操作文档
      • 抽屉组件 - EleDrawer
      • 文字提示 - EleTooltip
      • 文本组件 - EleText
      • 标签输入 - EleEditTag
      • 标签页 - EleTabs
      • 树下拉 - EleTreeSelect
      • 步骤条 - EleSteps
      • 气泡确认框 - ElePopconfirm
      • 消息提示 - EleMessage
      • 统计图表 - VueEcharts
      • 表格下拉 - EleTableSelect
      • 表格组件 - EleDataTable
      • 警告提示 - EleAlert
      • 页面容器 - ElePage
      • 高级弹窗 - EleModal
      • 高级表格 - EleProTable
  1. docs

抽屉组件 - EleDrawer

5.8.1.快速使用
抽屉组件是对 ElDrawer 的扩展,支持更丰富的属性,使用示例:

加 style="max-width: 100%;" 是为了在移动端下自适应防止超出屏幕。
运行代码 新窗口打开
5.8.2.属性列表
支持 ElDrawer 的全部属性(请查看 Element 文档),此外还增加了一些属性,全部属性:
例如实现一个非常酷的效果,将关闭按钮设为圆角的蓝色背景白色字体并悬浮在抽屉外面:

运行代码 新窗口打开
inner 属性限制在主体内部需要外层布局是 EleProLayout 如果用于其它项目中可自行增加样式修改:
// 增加全局样式设置限制在主体内部时的 top 和 left
body .ele-drawer.ele-drawer-inner {
top: 40px;
left: 200px;
}
  限制在主体内部打开从 v1.1.9 开始是通过 Teleport 传送到 EleProLayout 的主体区域实现,而不再是样式设置 top left 实现, 这样可以更简单的支持侧栏折叠等状态,以及适应顶栏侧栏的高度宽度修改,如果用于其它项目还是需要自己设置样式。
5.8.3.事件列表
支持 ElDrawer 的全部事件(请查看 Element 文档),全部事件:
5.8.4.插槽列表
支持 ElDrawer 的全部插槽(请查看 Element 文档),此外还增加了一个插槽:
例如使用 footer 插槽像弹窗一样底部添加取消和保存的按钮:

运行代码 新窗口打开
底部的按钮默认是居右显示的,如果还需要在左侧显示一些内容,实现示例:

运行代码 新窗口打开
插槽 closeBtn 是用于自定义关闭按钮,使用示例:

运行代码 新窗口打开

修改于 2025-12-20 03:37:01
上一页
工具方法与表单数据操作文档
下一页
文字提示 - EleTooltip
Built with