Skip to main content
Version: Next

Dialog and Drawer Components

Directory​

  1. Introduction
  2. Project Structure
  3. Core Components
  4. Architecture Overview
  5. Detailed Component Analysis
  6. Dependency Analysis
  7. Performance Considerations
  8. Troubleshooting Guide
  9. Conclusion

Introduction​

This document comprehensively introduces the Dialog and Drawer component system based on Vue 3 Composition API. It focuses on the design patterns of BaseDialog and BaseDrawer as fundamental components, and how business-level dialogs (such as ArtificialStationDialog, ProcessRouterDialog) achieve reusable templates through inheritance and extension. The document covers communication protocols, animation mechanisms, mask management, keyboard event handling, and cross-application communication schemes in micro-frontend environments.

Project Structure​

Diagram Sources

Section Sources

Core Components​

BaseDialog and BaseDrawer are the core foundational components of the entire dialog system, implemented using Vue 3's Composition API, defining standardized communication protocols via props and emits.

BaseDialog encapsulates the el-dialog component, providing a unified title bar, close button, confirm/cancel button layout, and supporting flexible content and footer customization via v-slots. Its SCSS style file defines visual specifications such as shadows, rounded corners, and padding.

BaseDrawer is built based on el-drawer, mainly used for sidebar interactions. Its SCSS module defines background icon animation effects (iconFrames) via @keyframes, implementing visual dynamic cues. The component controls whether the mask layer is clickable to close via the clickable property.

Section Sources

Architecture Overview​

Diagram Sources

Detailed Component Analysis​

Basic Dialog Component Analysis​

Component Communication Protocol​

BaseDialog receives configuration (such as title, width, height) via props, and defines event interfaces (close, confirm, open) via emits. Business components bind visible state via v-model to achieve two-way data binding.

Diagram Sources

Business Dialog Analysis​

ArtificialStationDialog Implementation Pattern​

ArtificialStationDialog inherits BaseDialog and introduces the useSelectDialog hook. This hook encapsulates data fetching (getUserList), state management (dataSource, selections), form validation, and submission logic (onEditConfirm). Through the hook.ts file, business logic is separated from UI, forming a reusable template.

Diagram Sources

ProcessRouterDialog Implementation Pattern​

ProcessRouterDialog also uses the useSelectDialog hook, but its business logic focuses on process route selection. On onOpen, it fetches associated process routes based on productId, then filters the selectable workstation list based on route IDs. On onConfirm, it passes the selected workstation data to the parent component via emit.

Section Sources

Interaction Detail Analysis​

Mask and Layer Management​

Basic components rely on el-dialog and el-drawer from element-plus, whose mask layer (.v-modal) z-index is managed by the framework. Business components ensure dialogs are mounted under body via the appendToBody property to avoid being affected by parent overflow. Multi-level stacking is controlled via z-index, with later opened dialogs having higher z-index.

Keyboard Event Listening​

Both BaseDialog and BaseDrawer support ESC key closing, which is the built-in behavior of element-plus components. show-close={false} hides the default close button, but the ESC function remains effective.

Section Sources

Dependency Analysis​

Diagram Sources

Performance Considerations​

  • On-demand Loading: Use destroy-on-close property to ensure internal components are destroyed after the dialog closes, releasing memory.
  • Debouncing: Add debounce logic to methods involving network requests like onRemoteMethod to avoid frequent requests.
  • Large Data Volumes: For dialogs containing tables, enable pagination or virtual scrolling to avoid rendering a large number of DOM nodes at once.

Troubleshooting Guide​

  • Dialog Cannot Open: Check if the visible value bound by v-model responds correctly, and confirm if trigger methods like onShowDialog are called.
  • Data Not Updated: Ensure ctx.emit('confirm', data) is correctly called in the onConfirm callback, and check if the parent component listens to this event.
  • Style Disorder: Check if SCSS module class names are correctly imported and used to avoid global style pollution.
  • Micro-frontend Communication Failure: Confirm if the cross-application event bus (such as EventBus or CustomEvent) is correctly initialized and listened to.

Section Sources

Conclusion​

This component system provides unified UI specifications and interaction patterns through BaseDialog and BaseDrawer, utilizing Vue 3 Composition API and tools like useVModel to achieve efficient props/emits communication. Business logic is encapsulated via independent hook.ts files, greatly improving code maintainability and reusability. Combined with the powerful features of element-plus, it implements complex interactions such as mask management and keyboard event handling, providing a solid foundation for building enterprise-level frontend applications.

Last updated on