logo
简体中文
导航

退出登录页面

Logout 组件用于创建退出登录确认页面，支持自定义提示信息和按钮文本。

基础用法

最基本的退出登录页面包含标题、确认信息和操作按钮。

退出登录

您确定要退出当前账号吗？ 

              import { Logout } from '@coffic/cosy-ui';

<Logout />

自定义样式

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

Logo

确认退出系统

退出后需要重新登录才能访问系统。您的所有未保存的工作将会丢失。

遇到问题？联系支持 
              import { Logout, getAvatarImage } from '@coffic/cosy-ui';

const logoUrl = getAvatarImage({
  name: 'logo',
  type: 'rounded',
});

<Logout
  title="确认退出系统"
  message="退出后需要重新登录才能访问系统。您的所有未保存的工作将会丢失。"
  logo={logoUrl}
  confirmText="确认退出系统"
  cancelText="继续工作"
  customClass="custom-logout"
>
  <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>
</Logout>

Props

基础属性

  • title (string, 可选) - 页面标题，默认为 “退出登录”
  • message (string, 可选) - 确认提示信息，默认为 “您确定要退出当前账号吗？”
  • logo (string, 可选) - Logo图片路径

按钮文本

  • confirmText (string, 可选) - 确认按钮文本，默认为 “退出登录”
  • cancelText (string, 可选) - 取消按钮文本，默认为 “取消”

样式定制

  • customClass (string, 可选) - 自定义CSS类名

插槽

组件提供以下插槽用于自定义内容：

  • header - 自定义页头内容
  • footer - 自定义页脚内容

最佳实践

  1. 用户体验

    • 提供清晰的退出确认信息
    • 确保按钮文本明确表达操作含义
    • 为用户提供取消操作的选项

  2. 样式建议

    • 使用警示色（如红色）突出显示确认按钮
    • 保持页面布局简洁明了
    • 适当使用图标增强视觉效果

  3. 功能建议

    • 在退出前提醒用户保存未保存的工作
    • 提供帮助链接或支持信息
    • 考虑添加”记住我”选项，方便下次登录