Global Functions Overview

TechUI mounts a powerful library of tools and interaction triggers onto the Vue global instance. Through the unified entry point $global, developers can directly invoke system-level capabilities or trigger UI components within component logic (Script), Hook functions, or even non-component files.

This design aims to decouple logic from the view, allowing you to drive interface interaction feedback and system state changes via pure JavaScript logic without writing Template code.

Core Mechanism

All global functions are mounted via Vue's app.config.globalProperties mechanism. In the Composition API, we uniformly access these functions using inject (dependency injection).

Basic Call

You do not need to import each function individually; simply inject the $global object to destructure the required methods:

import { inject } from 'vue';

// Inject in setup
const { 
  // Component Function Examples
  $tMessage, 
  $tLoading,
  // Functional Utility Examples
  themeToggle,
  openEnc
} = inject("$global");

const handleAction = () => {
  // Call directly without embedding components in the template
  $tLoading('System initializing...');
  
  // Execute system-level logic
  themeToggle('darkBlue');
};

Function Classification

To facilitate management and lookup, we divide global functions into two major categories:

Component Functions

"Render UI with JS"

These functions are primarily used to programmatically invoke interactive components. In traditional development patterns, using popups or tooltips usually requires placing <TuiDialog> or <TuiMessage> tags in the template and controlling their display via v-model. Component functions allow you to create instances directly via function calls; they are automatically mounted to the body or a specified node and automatically destroyed upon completion.

• Applicable Scenarios: Global message notifications, full-screen loading masks, dynamic popovers, strong visual alerts, etc.
• Features: No need to alter DOM structure, use and dispose.

Functional Utilities

"Shortcut to System Low-level Capabilities"

These functions are a pure logic toolset provided by TechUI. They encapsulate complex underlying logic (such as WASM encryption, theme engine calculations, route query parsing, etc.), providing a simple and intuitive API. Through global injection, it ensures that the version and configuration of utility methods remain consistent throughout the application lifecycle.

• Applicable Scenarios: Theme switching, internationalized text retrieval, encrypted data storage, route parameter operations, system feature detection, etc.
• Features: Pure logic execution, usually not involving UI rendering (except for route transitions).