logo
简体中文

导航菜单

文档

Register

Register 组件用于创建灵活且功能丰富的注册页面，支持多种注册方式、表单验证和自定义样式。

基础用法

最基本的注册页面包含标题、用户名、邮箱、密码输入框、服务条款和隐私政策选项，以及社交注册按钮。

自定义样式

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

Logo

企业注册

创建企业账号

或
已有账号？ 立即登录
---



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

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

<Register
  title="企业注册"
  subtitle="创建企业账号"
  logo={logoUrl}
  socialLogins={['github', 'google', 'wechat']}
  showTerms={true}
  showPrivacy={true}
  customClass="cosy:bg-gradient-to-r cosy:from-purple-500 cosy:to-pink-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>
</Register>

Props

基础属性

  • title (string, 可选) - 注册页标题，默认为”注册”
  • subtitle (string, 可选) - 注册页副标题
  • logo (string, 可选) - 注册页Logo图片路径

功能配置

  • socialLogins ((‘github’ | ‘google’ | ‘wechat’)[], 可选) - 社交账号注册方式列表
  • showTerms (boolean, 可选) - 是否显示服务条款选项，默认为 true
  • showPrivacy (boolean, 可选) - 是否显示隐私政策选项，默认为 true

文本自定义

  • registerButtonText (string, 可选) - 注册按钮文本，默认为”注册”
  • usernameLabel (string, 可选) - 用户名输入框标签，默认为”用户名”
  • emailLabel (string, 可选) - 邮箱输入框标签，默认为”邮箱”
  • passwordLabel (string, 可选) - 密码输入框标签，默认为”密码”
  • confirmPasswordLabel (string, 可选) - 确认密码输入框标签，默认为”确认密码”
  • termsText (string, 可选) - 服务条款文本，默认为”我已阅读并同意服务条款”
  • privacyText (string, 可选) - 隐私政策文本，默认为”我已阅读并同意隐私政策”
  • dividerText (string, 可选) - 社交注册分隔符文本，默认为”或”

样式定制

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

插槽

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

  • header - 页头自定义内容
  • footer - 页脚自定义内容
  • socialButtons - 自定义社交注册按钮

最佳实践

  1. 安全性考虑

    • 确保使用 HTTPS 进行数据传输
    • 实现密码强度验证
    • 添加注册频率限制
    • 实现邮箱验证流程

  2. 用户体验

    • 提供清晰的错误提示
    • 在注册过程中禁用提交按钮
    • 支持键盘导航和表单自动填充
    • 显示密码强度指示器

  3. 响应式设计

    • 组件默认支持响应式布局
    • 在移动设备上自动调整输入框大小
    • 确保社交注册按钮在各种屏幕尺寸下都易于点击

  4. 自定义建议

    • 根据品牌调整配色方案
    • 添加品牌Logo
    • 根据需要调整社交注册选项
    • 自定义服务条款和隐私政策链接

搜索