登录页

Login 是一个集成了布局、背景、表单验证和交互逻辑的完整登录页面组件。支持多种视觉风格和布局位置，允许通过插槽深度定制 Logo、边框装饰及额外工具栏。

基础用法

最基本的用法只需传入 form 数据对象，并监听 login 事件。组件会自动处理表单验证逻辑，验证通过后触发 login 事件。

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

const loginConfig = reactive({
  form: {
    username: '',
    password: '',
    captcha: '' // 如果开启验证码
  },
  loading: false
})

const handleLogin = (formData) => {
  console.log('提交登录:', formData)
  loginConfig.loading = true
  
  // 模拟异步请求
  setTimeout(() => {
    loginConfig.loading = false
    alert('登录成功')
  }, 1000)
}
</script>

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

布局位置

通过 position 属性控制登录框在页面中的水平位置。支持 center (居中), left (靠左), right (靠右)。

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

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

背景配置

组件提供了灵活的背景配置方案，通过 backgroundType 属性切换。

• vector (默认): 使用内置的矢量几何纹理，不仅美观且跟随主题色自动变化，无需加载图片资源。
• image: 使用自定义图片背景。需配合 backgroundImage 属性。
• gradient: 使用渐变色背景。

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

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

尺寸控制

通过 formSize 属性可以控制登录表单面板的整体尺寸，适配不同的视觉密度。可选值：small, default, large。

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

插槽扩展

TuiLogin 提供了强大的插槽机制，允许您在关键位置插入自定义组件。

• logo: 用于放置系统 Logo，位于表单顶部。
• border: 用于放置自定义边框或装饰面板（如示例中的科幻边框 ScifiPanelAlpha）。
• extra: 用于放置额外工具，如主题切换按钮、帮助文档链接等。

<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 参考

Props

属性名	说明	类型	默认值
form	表单数据对象，必须包含 username 和 password 字段	Object	Required
rules	表单验证规则 (遵循 AsyncValidator 标准)	Object	—
position	登录框位置，可选 'center', 'left', 'right'	String	'center'
formSize	表单尺寸，可选 'small', 'default', 'large'	String	'large'
backgroundType	背景类型，可选 'vector', 'image', 'gradient'	String	'vector'
backgroundImage	背景图片 URL (仅当 backgroundType='image' 时有效)	String	—
enableCaptcha	是否开启验证码输入框	Boolean	true
captchaImg	验证码图片内容 (Base64 或 URL)	String	'ERROR'
loading	登录按钮是否处于加载状态	Boolean	false
usernamePlaceholder	用户名输入框占位符	String	—
passwordPlaceholder	密码输入框占位符	String	—
captchaPlaceholder	验证码输入框占位符	String	—
loginButtonText	登录按钮文字	String	—
helpText	左下角“帮助”链接文字	String	—
forgetText	右下角“忘记密码”链接文字	String	—

Events

事件名	说明	回调参数
login	点击登录且表单验证通过后触发	(form: Object)
validate	表单验证结果回调	(isValid: Boolean, errors: Object)
help	点击“帮助”链接时触发	—
forget	点击“忘记密码”链接时触发	—
captchaError	验证码输入错误或点击验证码图片刷新时触发	—

Slots

插槽名	说明
logo	登录框顶部的 Logo 区域
border	登录框外层的装饰区域 (常用于放置动态边框组件)
extra	页面层级的额外内容 (常用于放置绝对定位的工具按钮，如主题切换)

Expose

名称	说明	类型
resetForm	重置表单输入	() => void