Login

Login is a complete login page component that integrates layout, background, form validation, and interaction logic. It supports various visual styles and layout positions, and allows for deep customization of the Logo, border decorations, and extra toolbars via slots.

Basic Usage

The most basic usage requires passing a form data object and listening for the login event. The component automatically handles form validation logic and triggers the login event once validation passes.

<script setup>
import { reactive } from 'vue'

const loginConfig = reactive({
  form: {
    username: '',
    password: '',
    captcha: '' // If captcha is enabled
  },
  loading: false
})

const handleLogin = (formData) => {
  console.log('Login submitted:', formData)
  loginConfig.loading = true
  
  // Simulate asynchronous request
  setTimeout(() => {
    loginConfig.loading = false
    alert('Login successful')
  }, 1000)
}
</script>

<template>
  <div style="height: 100vh;">
    <TuiLogin 
      :form="loginConfig.form"
      :loading="loginConfig.loading"
      @login="handleLogin"
    />
  </div>
</template>

Layout Position

Control the horizontal position of the login box within the page using the position attribute. Supported values are center (default), left, and right.

<template>
  <TuiLogin position="right" ... />

  <TuiLogin position="center" ... />
</template>

Background Configuration

The component provides a flexible background configuration scheme, switchable via the backgroundType attribute.

• vector (Default): Uses built-in vector geometric textures that are aesthetically pleasing and automatically adapt to the theme color without requiring image resources.
• image: Uses a custom image background. Requires the backgroundImage attribute.
• gradient: Uses a gradient color background.

<script setup>
import bgImage from './assets/login-bg.png'
</script>

<template>
  <TuiLogin 
    backgroundType="image" 
    :backgroundImage="bgImage"
    ... 
  />
</template>

Size Control

The formSize attribute controls the overall size of the login form panel to adapt to different visual densities. Options: small, default, large.

<template>
  <TuiLogin formSize="large" ... />
</template>

Slot Extension

TuiLogin provides a powerful slot mechanism, allowing you to insert custom components at key positions.

• logo: Used for placing the system Logo, located at the top of the form.
• border: Used for placing custom borders or decorative panels (e.g., the ScifiPanelAlpha sci-fi border).
• extra: Used for placing extra tools, such as theme toggle buttons or help document links.

<template>
  <TuiLogin v-bind="config">
    <template #logo>
      <div class="my-logo">
        <img src="/logo.png" alt="Logo" />
        <span>TechUI System</span>
      </div>
    </template>

    <template #border>
      <div class="custom-border-effect"></div>
    </template>

    <template #extra>
      <TuiThemeToggle />
    </template>
  </TuiLogin>
</template>

API Reference

Props

Property	Description	Type	Default
form	Form data object, must contain username and password fields	Object	Required
rules	Form validation rules (follows AsyncValidator standard)	Object	—
position	Login box position, options: 'center', 'left', 'right'	String	'center'
formSize	Form size, options: 'small', 'default', 'large'	String	'large'
backgroundType	Background type, options: 'vector', 'image', 'gradient'	String	'vector'
backgroundImage	Background image URL (valid only when backgroundType='image')	String	—
enableCaptcha	Whether to enable the captcha input box	Boolean	true
captchaImg	Captcha image content (Base64 or URL)	String	'ERROR'
loading	Whether the login button is in a loading state	Boolean	false
usernamePlaceholder	Placeholder for the username input box	String	—
passwordPlaceholder	Placeholder for the password input box	String	—
captchaPlaceholder	Placeholder for the captcha input box	String	—
loginButtonText	Login button text	String	—
helpText	Text for the "Help" link in the bottom-left corner	String	—
forgetText	Text for the "Forgot Password" link in the bottom-right corner	String	—

Events

Event Name	Description	Callback Parameters
login	Triggered when login is clicked and form validation passes	(form: Object)
validate	Callback for form validation results	(isValid: Boolean, errors: Object)
help	Triggered when the "Help" link is clicked	—
forget	Triggered when the "Forgot Password" link is clicked	—
captchaError	Triggered when the captcha is entered incorrectly or refreshed	—

Slots

Slot Name	Description
logo	Logo area at the top of the login box
border	Outer decorative area of the login box (often used for dynamic border components)
extra	Page-level extra content (often used for absolute-positioned tool buttons)

Expose

Name	Description	Type
resetForm	Resets form inputs	() => void