Component Functions

Component Functions allow you to directly invoke TechUI's interactive components within JS logic (such as setup, async callbacks, utility functions) without explicitly mounting component tags in the template.

Please jump to view the complete documentation

For the complete documentation of global utility functions, please click to view the Global Services - Functions chapter.

There are also relevant mentions and introductions within individual components:

Such as the Notification Component - Message chapter.

Such as the Basic Support - Loading chapter.

Call Method

All component functions are mounted on the global object $global. It is recommended to use inject to destructure and retrieve them.

import { inject } from 'vue';

// Inject in setup
const { 
  $tMessage, 
  $tLoading, 
  $tLoadingClose 
} = inject("$global");

const handleAction = async () => {
  $tLoading('Processing...');
  try {
    // Business logic...
    $tMessage({ type: 'success', content: 'Done!' });
  } finally {
    $tLoadingClose();
  }
};

Message Feedback

Used to instantly inform the user of operation results or status.

Message (Global Message)

The most common status feedback, usually located in the top center.

• $tMessage(options): Displays a message. options can be a string or an object { type: 'success'|'error', content: '...' }.
• $tMessageCloseAll(): Closes all currently displayed messages.

Notify (Notification)

Notifications with a title and details, usually located in the top right corner of the screen.

• $tNotify(options): Displays a notification. Supports { title, content, type } configuration.
• $tNotifyCloseAll(): Closes all notifications.

Toast (Light Tip)

Minimalist text tips with the least intrusion, usually located in the center or bottom of the screen.

• $tToast(options): Displays a Toast. options can be a string or an object.
• $tToastClose(): Closes the current Toast.

Flash (Flash Alert)

Produces flashing light effects on the screen edges or full screen, used to simulate system damage, high-energy reactions, or emergency alerts.

• $tFlash(options): Turns on flashing. Supports setting frequency frequency and appearance appearance.
• $tFlashClose(): Stops flashing.

Attention Dispatcher

Used to sort and pop up multiple reminder components in order, often used for gamified guidance or continuous task objective prompts.

• $tAttentionDispatcher(config): Initializes the dispatcher and passes in the task queue queue.
• $tAttentionDispatcherClose(): Closes the dispatcher and the currently displayed reminder.

Mask & Loading

Used to control full-screen view states.

Mask (Global Mask)

A semi-transparent layer covering the entire page, which can be used for focus modes or to block user operations.

• $tMask(options): Displays the mask. Supports configuring blur (background blur) and closable (click to close).
• $tMaskClose(): Closes the mask.

Loading (Loading Animation)

Adds holographic scanning or data flow animations on top of the mask.

• $tLoading(options): Displays loading. Supports full (full screen) or area (local) modes, and can specify the spinner type.
• $tLoadingClose(): Closes the loading animation.

Dynamic Floating Layer

Used to dynamically create floating elements at any position.

Popover (Bubble Floating Layer)

Manually creates a Poptip or Popinfo instance, commonly used in Canvas drawing, chart interactions, or scenarios where DOM binding is not possible.

• $tPopover(target, options): Displays a popover on the specified target (DOM element or selector). Supports placement and trigger configurations.
• $tPopoverCloseAll(): Closes all popover instances dynamically created by JS (does not affect instances created by directives or components).