logo
简体中文

导航菜单

文档

Login

Login 组件用于创建灵活且功能丰富的登录页面，支持多种登录方式、自定义样式和布局。

基础用法

最基本的登录页面包含标题、用户名密码输入框、记住我选项、忘记密码链接和社交登录按钮。

欢迎回来

请登录以继续

忘记密码？
或

欢迎回来

请登录以继续

忘记密码？
或
---



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>

自定义样式

你可以通过自定义类名、插槽等方式来自定义登录页面的样式和内容。

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

自定义 CSS 类名，用于覆盖默认样式。

欢迎回来

请登录以继续

欢迎回来

请登录以继续

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

社交登录分隔符文本，默认为”或”。

欢迎回来

请登录以继续

或者使用

欢迎回来

请登录以继续

或者使用
---
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

忘记密码链接文本，默认为”忘记密码？“。

欢迎回来

请登录以继续

找回密码

欢迎回来

请登录以继续

找回密码
---
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

登录按钮文本，默认为”登录”。

欢迎回来

请登录以继续

欢迎回来

请登录以继续

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

登录页Logo图片路径。

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

密码输入框标签，默认为”密码”。

欢迎回来

请登录以继续

欢迎回来

请登录以继续

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

记住我选项文本，默认为”记住我”。

欢迎回来

请登录以继续

欢迎回来

请登录以继续

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

是否显示”忘记密码”链接，默认为 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

是否显示”记住我”选项，默认为 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

社交登录方式列表，支持 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

登录页副标题。

欢迎回来

请登录以继续

欢迎回来

请登录以继续

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

登录页标题，默认为”登录”。

系统登录

系统登录

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

用户名输入框标签，默认为”用户名”。

欢迎回来

请登录以继续

欢迎回来

请登录以继续

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

通过 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>

通过 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

通过 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>

搜索