基础弹窗与抽屉容器技术文档
目录
简介
本文档详细介绍了LME基础UI库中的两个核心容器组件：BaseDialog（基础弹窗）和BaseDrawer（基础抽屉）。这两个组件基于Vue 3组合式API构建，提供了完整的弹窗和抽屉功能，包括遮罩层管理、z-index堆叠层级控制、ESC键监听关闭功能以及触控支持等特性。
项目结构
图表来源
章节来源
核心组件架构
图表来源
BaseDialog组件详解
组件特性
BaseDialog是一个基于Element Plus el-dialog封装的高级弹窗组件，具有以下核心特性：
- Props驱动的显示控制：通过v-model或props控制弹窗显示状态
- Emits事件通信机制：提供close、confirm、open三个核心事件
- 遮罩层管理：智能管理遮罩层的显示与隐藏
- Z-index堆叠层级控制：确保弹窗在正确的层级显示
- ESC键监听关闭功能：自动监听ESC键关闭弹窗
- 插槽内容自定义：支持默认插槽和自定义按钮插槽
实现原理
图表来源
核心代码分析
事件处理机制
// 关闭弹窗都会调这个方法，有些时候点击confirm的时候不能同时触发close的，加个参数，用于区分是点击按钮关闭的事件还是close事件
const onClose = (isClose = true) => emit('close', isClose)
const onConfirm = () => emit('confirm')
const onOpen = () => emit('open')
样式类名计算
const className = computed(() => {
if (attrs.class) {
return `without-cs-dialog ${attrs.class}`
}
return 'without-cs-dialog'
})
内容区域高度控制
const currentHeight = computed(() => {
return attrs.height || 'auto'
})
章节来源
BaseDrawer组件详解
组件特性
BaseDrawer是一个基于Element Plus el-drawer封装的高级抽屉组件，具有以下核心特性：
- SCSS Transition动画：基于CSS动画实现平滑的滑入/滑出效果
- 触控支持：支持移动端触控手势操作
- 渐变背景效果：独特的视觉效果增强用户体验
- 图标动画：动态图标增强交互体验
- 灵活的宽度控制：支持自定义宽度设置
实现原理
图表来源
核心代码分析
动画关键帧定义
@keyframes iconFrames {
0% { opacity: 1; }
25% { opacity: 0.66; }
50% { opacity: 0.33; }
75% { opacity: 0.66; }
100% { opacity: 1; }
}
图标动画应用
.iconPosition {
position: absolute;
top: 38px;
right: 111px;
user-select: none;
-webkit-user-drag: none;
animation: iconFrames 2s infinite linear;
}
事件处 理
return () => {
const vSlots: {
footer: () => Component
title?: () => Component
} = {
footer() {
return (
<div class={styles.csDialogFooter}>
<el-button
onClick={() => emit('close')}
type="info"
plain
class={{
[styles.dialogBtn]: true,
[styles.csBaseBtn]: true,
}}
>
{_t('取消')}
</el-button>
<el-button
onClick={() => emit('confirm')}
type="primary"
disabled={props.submitDisabled}
class={{
[styles.csBaseBtn]: true,
}}
>
{_t('确认')}
</el-button>
</div>
)
},
}
}
章节来源
组件对比与适用场景
功能对比表
| 特性 | BaseDialog | BaseDrawer |
|---|---|---|
| 显示方式 | 中间弹出 | 从侧边滑入 |
| 默认宽度 | 525px | 可自定义 |
| 遮罩行为 | 点击关闭 | 可配置点击行为 |
| 动画效果 | 无 | 滑入/滑出 |
| 移动端支持 | 一般 | 优秀 |
| 内容区域 | 高度可调 | 完全填充 |
| 适用场景 | 短暂交互 | 长内容展示 |
使用场景建议
微前端环境最佳实践
CSS作用域隔离
在微前端环境中，CSS作用域隔离是确保组件独立性的关键。LME基础UI库采用了以下策略：
- 命名空间前缀：通过
$namespace = 'cs'实现样式隔离 - 自动命名空间转换：打包时自动将
el-转换为cs- - Scoped CSS：使用SCSS模块化避免样式污染
// 构建脚本中的命名空间转换
str = str.replace(/el-/g, 'cs-')
事件冒泡处理
最佳实践建议
- 统一事件命名规范：使用语义化的事件名称
- 参数序列化：确保跨应用传递的数据可序列化
- 错误边界处理：在应用边界设置错误捕获
- 资源加载隔离：避免重复加载相同资源
章节来源
总结
LME基础UI库的BaseDialog和BaseDrawer组件为开发者提供了强大而灵活的弹窗和抽屉解决方案。通过Vue 3组合式API的使用，这两个组件实现了：
- 高度可配置性：丰富的props和事件接口满足各种业务需求
- 良好的用户体验：流畅的动画效果和直观的操作反馈
- 优秀的兼容性：支持桌面和移动端设备
- 微前端友好：完善的CSS作用域隔离和事件处理机制
在实际项目中，开发者应根据具体的交互需求和内容特点选择合适的组件，合理利用其提供的各种功能特性，以构建出色的用户界面体验。