Skip to main content
Version: Next

Base Dialog and Drawer Container Technical Documentation

Table of Contents​

  1. Introduction
  2. Project Structure
  3. Core Component Architecture
  4. BaseDialog Component Detailed Explanation
  5. BaseDrawer Component Detailed Explanation
  6. Component Comparison and Application Scenarios
  7. Micro-Frontend Environment Best Practices
  8. Summary

Introduction​

This document provides a detailed introduction to two core container components in the LME base UI library: BaseDialog (base dialog) and BaseDrawer (base drawer). These two components are built based on Vue 3 Composition API, providing complete dialog and drawer functionality, including mask layer management, z-index stacking level control, ESC key listening and closing functionality, and touch support.

Project Structure​

Chart Source

Section Source

Core Component Architecture​

Chart Source

BaseDialog Component Detailed Explanation​

Component Features​

BaseDialog is an advanced dialog component based on Element Plus el-dialog encapsulation, with the following core features:

  1. Props-driven Display Control: Control dialog display state through v-model or props
  2. Emits Event Communication Mechanism: Provides three core events: close, confirm, open
  3. Mask Layer Management: Intelligently manages mask layer display and hiding
  4. Z-index Stacking Level Control: Ensures dialog displays at the correct level
  5. ESC Key Listening and Closing Functionality: Automatically listens for ESC key to close dialog
  6. Slot Content Customization: Supports default slot and custom button slot

Implementation Principle​

Chart Source

Core Code Analysis​

Event Handling Mechanism​

// Close dialog will call this method. Sometimes when clicking confirm, it cannot trigger close at the same time. Add a parameter to distinguish whether it is a button close event or a close event
const onClose = (isClose = true) => emit('close', isClose)
const onConfirm = () => emit('confirm')
const onOpen = () => emit('open')

Style Class Name Calculation​

const className = computed(() => {
  if (attrs.class) {
    return `without-cs-dialog ${attrs.class}`
  }
  return 'without-cs-dialog'
})

Content Area Height Control​

const currentHeight = computed(() => {
  return attrs.height || 'auto'
})

Section Source

BaseDrawer Component Detailed Explanation​

Component Features​

BaseDrawer is an advanced drawer component based on Element Plus el-drawer encapsulation, with the following core features:

  1. SCSS Transition Animation: Based on CSS animation to implement smooth slide-in/slide-out effects
  2. Touch Support: Supports mobile touch gesture operations
  3. Gradient Background Effect: Unique visual effects enhance user experience
  4. Icon Animation: Dynamic icons enhance interactive experience
  5. Flexible Width Control: Supports custom width settings

Implementation Principle​

Chart Source

Core Code Analysis​

Animation Keyframe Definition​

@keyframes iconFrames {
  0% { opacity: 1; }
  25% { opacity: 0.66; }
  50% { opacity: 0.33; }
  75% { opacity: 0.66; }
  100% { opacity: 1; }
}

Icon Animation Application​

.iconPosition {
  position: absolute;
  top: 38px;
  right: 111px;
  user-select: none;
  -webkit-user-drag: none;
  animation: iconFrames 2s infinite linear;
}

Event Handling​

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>
      )
    },
  }
}

Section Source

Component Comparison and Application Scenarios​

Feature Comparison Table​

FeatureBaseDialogBaseDrawer
Display MethodCenter PopupSlide from Side
Default Width525pxCustomizable
Mask BehaviorClick to CloseConfigurable Click Behavior
Animation EffectNoneSlide In/Out
Mobile SupportGeneralExcellent
Content AreaAdjustable HeightFully Filled
Application ScenarioBrief InteractionLong Content Display

Usage Scenario Suggestions​

Micro-Frontend Environment Best Practices​

CSS Scope Isolation​

In micro-frontend environments, CSS scope isolation is key to ensuring component independence. The LME base UI library adopts the following strategies:

  1. Namespace Prefix: Implements style isolation through $namespace = 'cs'
  2. Automatic Namespace Conversion: Automatically converts el- to cs- during packaging
  3. Scoped CSS: Uses SCSS modularization to avoid style pollution
// Namespace conversion in build script
str = str.replace(/el-/g, 'cs-')

Event Bubbling Handling​

Best Practice Recommendations​

  1. Unified Event Naming Convention: Use semantic event names
  2. Parameter Serialization: Ensure data passed across applications is serializable
  3. Error Boundary Handling: Set error capture at application boundaries
  4. Resource Loading Isolation: Avoid duplicate loading of the same resources

Section Source

Summary​

The BaseDialog and BaseDrawer components of the LME base UI library provide developers with powerful and flexible dialog and drawer solutions. Through the use of Vue 3 Composition API, these two components achieve:

  • High Configurability: Rich props and event interfaces meet various business requirements
  • Good User Experience: Smooth animation effects and intuitive operation feedback
  • Excellent Compatibility: Supports desktop and mobile devices
  • Micro-Frontend Friendly: Complete CSS scope isolation and event handling mechanisms

In actual projects, developers should choose appropriate components based on specific interaction requirements and content characteristics, and make reasonable use of the various functional features they provide to build excellent user interface experiences.

Last updated on