logo
English

导航菜单

Documents

Login Page

The Login component is used to create flexible and feature-rich login pages, supporting multiple login methods, custom styles, and layouts.

Basic Usage

The most basic login page includes a title, username and password input fields, remember me option, forgot password link, and social login buttons.

欢迎回来

请登录以继续

忘记密码？
或

欢迎回来

请登录以继续

忘记密码？
或
---



import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  showRememberMe={true}
  showForgotPassword={true}
  socialLogins={['github', 'google']}
/>

<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :show-remember-me="true"
        :show-forgot-password="true"
        :social-logins="['github', 'google']"
    />
</template>

Custom Styles

You can customize the style and content of the login page through custom class names and slots.

Logo

企业登录

安全登录到企业系统

忘记密码？
或
还没有账号？ 立即注册
Logo

企业登录

安全登录到企业系统

忘记密码？
或
还没有账号？ 立即注册
---



import { getAvatarImage, Login } from "@coffic/cosy-ui";

const logoUrl = getAvatarImage({
	width: 100,
	height: 100,
	provider: "robohash",
	tag: "company-logo",
});
---

<Login
  title="企业登录"
  subtitle="安全登录到企业系统"
  logo={logoUrl}
  socialLogins={['github', 'google', 'wechat']}
  showRememberMe={true}
  showForgotPassword={true}
  customClass="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-500">
  <div
    slot="footer"
    class="cosy:text-center cosy:mt-4 cosy:text-sm cosy:text-base-content/60">
    还没有账号？ <a
      href="#"
      class="cosy:text-primary cosy:hover:text-primary-focus">立即注册</a
    >
  </div>
</Login>

<script setup lang="ts">
import { getAvatarImage, Login } from '@coffic/cosy-ui/vue';

const logoUrl = getAvatarImage({
    width: 100,
    height: 100,
    provider: 'robohash',
    tag: 'company-logo',
});
</script>

<template>
    <Login
        title="企业登录"
        subtitle="安全登录到企业系统"
        :logo="logoUrl"
        :social-logins="['github', 'google', 'wechat']"
        :show-remember-me="true"
        :show-forgot-password="true"
        custom-class="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-500">
        <template #footer>
            <div class="cosy:text-center cosy:mt-4 cosy:text-sm cosy:text-base-content/60">
                还没有账号？
                <a href="#" class="cosy:text-primary cosy:hover:text-primary-focus">立即注册</a>
            </div>
        </template>
    </Login>
</template>

Props

customClass

Custom CSS class name for overriding default styles.

欢迎回来

请登录以继续

欢迎回来

请登录以继续

---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  customClass="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-500"
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        custom-class="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-500"
    />
</template>

dividerText

Social login divider text, defaults to “or”.

欢迎回来

请登录以继续

或者使用

欢迎回来

请登录以继续

或者使用
---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  dividerText="或者使用"
  socialLogins={['github', 'google']}
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        divider-text="或者使用"
        :social-logins="['github', 'google']"
    />
</template>

forgotPasswordText

Forgot password link text, defaults to “Forgot password?“.

欢迎回来

请登录以继续

找回密码

欢迎回来

请登录以继续

找回密码
---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  showForgotPassword={true}
  forgotPasswordText="找回密码"
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :show-forgot-password="true"
        forgot-password-text="找回密码"
    />
</template>

loginButtonText

Login button text, defaults to “Login”.

欢迎回来

请登录以继续

欢迎回来

请登录以继续

---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  loginButtonText="立即登录"
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        login-button-text="立即登录"
    />
</template>

Path to the login page logo image.

Logo

欢迎回来

请登录以继续

Logo

欢迎回来

请登录以继续

---
import { getAvatarImage, Login } from "@coffic/cosy-ui";

const logoUrl = getAvatarImage({
  width: 100,
  height: 100,
  provider: "robohash",
  tag: "company-logo",
});
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  logo={logoUrl}
/>


<script setup lang="ts">
import { getAvatarImage, Login } from '@coffic/cosy-ui/vue';

const logoUrl = getAvatarImage({
    width: 100,
    height: 100,
    provider: 'robohash',
    tag: 'company-logo',
});
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :logo="logoUrl"
    />
</template>

passwordLabel

Password input field label, defaults to “Password”.

欢迎回来

请登录以继续

欢迎回来

请登录以继续

---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  passwordLabel="请输入密码"
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        password-label="请输入密码"
    />
</template>

rememberMeText

Remember me option text, defaults to “Remember me”.

欢迎回来

请登录以继续

欢迎回来

请登录以继续

---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  showRememberMe={true}
  rememberMeText="30天内自动登录"
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :show-remember-me="true"
        remember-me-text="30天内自动登录"
    />
</template>

showForgotPassword

Whether to show the “Forgot password” link, defaults to false.

欢迎回来

请登录以继续

忘记密码？

欢迎回来

请登录以继续

欢迎回来

请登录以继续

忘记密码？

欢迎回来

请登录以继续

---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  showForgotPassword={true}
/>


---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  showForgotPassword={false}
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :show-forgot-password="true"
    />
</template>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :show-forgot-password="false"
    />
</template>

showRememberMe

Whether to show the “Remember me” option, defaults to false.

欢迎回来

请登录以继续

欢迎回来

请登录以继续

欢迎回来

请登录以继续

欢迎回来

请登录以继续

---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  showRememberMe={true}
/>


---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  showRememberMe={false}
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :show-remember-me="true"
    />
</template>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :show-remember-me="false"
    />
</template>

socialLogins

List of social login methods, supports github, google, wechat.

欢迎回来

请登录以继续

或

欢迎回来

请登录以继续

或

欢迎回来

请登录以继续

或

欢迎回来

请登录以继续

或

欢迎回来

请登录以继续

或

欢迎回来

请登录以继续

或
---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  socialLogins={['github']}
/>


---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  socialLogins={['google']}
/>


---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  socialLogins={['wechat']}
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :social-logins="['github']"
    />
</template>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :social-logins="['google']"
    />
</template>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :social-logins="['wechat']"
    />
</template>

subtitle

Login page subtitle.

欢迎回来

请登录以继续

欢迎回来

请登录以继续

---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
    />
</template>

title

Login page title, defaults to “Login”.

系统登录

系统登录

---
import { Login } from "@coffic/cosy-ui";
---

<Login title="系统登录" />


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login title="系统登录" />
</template>

usernameLabel

Username input field label, defaults to “Username”.

欢迎回来

请登录以继续

欢迎回来

请登录以继续

---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  usernameLabel="请输入用户名或邮箱"
/>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        username-label="请输入用户名或邮箱"
    />
</template>

Slots

Custom content at the bottom of the login page through the footer slot:

欢迎回来

请登录以继续

还没有账号？ 立即注册

欢迎回来

请登录以继续

还没有账号？ 立即注册
---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
>
  <div
    slot="footer"
    class="cosy:text-center cosy:mt-4 cosy:text-sm cosy:text-base-content/60">
    还没有账号？ <a
      href="#"
      class="cosy:text-primary cosy:hover:text-primary-focus">立即注册</a>
  </div>
</Login>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login title="欢迎回来" subtitle="请登录以继续">
        <template #footer>
            <div class="cosy:text-center cosy:mt-4 cosy:text-sm cosy:text-base-content/60">
                还没有账号？
                <a href="#" class="cosy:text-primary cosy:hover:text-primary-focus">立即注册</a>
            </div>
        </template>
    </Login>
</template>

Custom content at the top of the login page through the header slot:

企业登录系统
安全可靠的登录体验
企业登录系统
安全可靠的登录体验
---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
>
  <div slot="header">
    <div class="cosy:text-center">
      <div class="cosy:text-2xl cosy:font-bold cosy:mb-2">企业登录系统</div>
      <div class="cosy:text-sm cosy:text-base-content/60">安全可靠的登录体验</div>
    </div>
  </div>
</Login>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login title="欢迎回来" subtitle="请登录以继续">
        <template #header>
            <div class="cosy:text-center">
                <div class="cosy:text-2xl cosy:font-bold cosy:mb-2">企业登录系统</div>
                <div class="cosy:text-sm cosy:text-base-content/60">安全可靠的登录体验</div>
            </div>
        </template>
    </Login>
</template>

socialButtons

Custom social login buttons through the socialButtons slot:

欢迎回来

请登录以继续

或

欢迎回来

请登录以继续

或
---
import { Login } from "@coffic/cosy-ui";
---

<Login
  title="欢迎回来"
  subtitle="请登录以继续"
  socialLogins={['github', 'google']}
>
  <div slot="socialButtons">
    <div class="cosy:mt-6 cosy:grid cosy:grid-cols-2 cosy:gap-3">
      <button class="cosy:w-full cosy:py-2 cosy:px-4 cosy:rounded-md cosy:bg-blue-500 cosy:hover:bg-blue-600 cosy:text-white">
        自定义按钮 1
      </button>
      <button class="cosy:w-full cosy:py-2 cosy:px-4 cosy:rounded-md cosy:bg-green-500 cosy:hover:bg-green-600 cosy:text-white">
        自定义按钮 2
      </button>
    </div>
  </div>
</Login>


<script setup lang="ts">
import { Login } from '@coffic/cosy-ui/vue';
</script>

<template>
    <Login
        title="欢迎回来"
        subtitle="请登录以继续"
        :social-logins="['github', 'google']">
        <template #socialButtons>
            <div class="cosy:mt-6 cosy:grid cosy:grid-cols-2 cosy:gap-3">
                <button
                    class="cosy:w-full cosy:py-2 cosy:px-4 cosy:rounded-md cosy:bg-blue-500 cosy:hover:bg-blue-600 cosy:text-white">
                    自定义按钮 1
                </button>
                <button
                    class="cosy:w-full cosy:py-2 cosy:px-4 cosy:rounded-md cosy:bg-green-500 cosy:hover:bg-green-600 cosy:text-white">
                    自定义按钮 2
                </button>
            </div>
        </template>
    </Login>
</template>

搜索