更新记录

1.0.0（2024-11-27） 下载此版本

实现基本页面，方法定义，验证码倒计时

平台兼容性

yxtbxm-login1 登录注册组件

一个美观、响应式的登录与注册组件，适用于uni-app项目

组件介绍

该组件提供了精美的登录和注册界面，具有以下特点：

• 💫 优雅的动画和过渡效果
• 🎨 精心设计的UI界面，支持自定义样式
• 📱 完全响应式，适配各种设备
• ✅ 内置表单验证功能
• 🔄 支持登录与注册界面无缝切换
• 👁️ 密码显示/隐藏切换功能

预览

安装方法

方式一：使用HBuilderX导入

1. 在HBuilderX中打开你的项目
2. 点击菜单栏的 uni-app插件 -> 导入uni-app插件
3. 搜索 yxtbxm-login1 并安装

方式二：手动导入

1. 从插件市场下载插件包
2. 将下载好的插件包解压，复制 uni_modules 目录到你的项目根目录

使用方法

基础用法

在页面中引入组件：

复制代码<template>
  <view>
    <yxtbxm-login></yxtbxm-login>
  </view>
</template>

<script>
export default {
  // 页面配置
}
</script>

单独使用登录组件

复制代码<template>
  <view>
    <yxtbxm-login1></yxtbxm-login1>
  </view>
</template>

单独使用注册组件

复制代码<template>
  <view>
    <yxtbxm-register></yxtbxm-register>
  </view>
</template>

组件结构

复制代码uni_modules/yxtbxm-login1/
├── components/
│   ├── yxtbxm-login/        # 主容器组件，集成登录和注册功能
│   │   └── yxtbxm-login.vue
│   └── yxtbxm-login1/       # 单独的登录和注册组件
│       ├── yxtbxm-login1.vue  # 登录组件
│       ├── yxtbxm-register.vue # 注册组件
│       └── index.js        # 组件导出文件
├── package.json
└── readme.md

组件属性

yxtbxm-login (主容器组件)

yxtbxm-login1 (登录组件)

yxtbxm-register (注册组件)

组件事件

yxtbxm-login1 (登录组件)

yxtbxm-register (注册组件)

自定义样式

组件支持通过CSS变量进行样式自定义：

复制代码/* 在父组件中设置以下CSS变量，可覆盖默认样式 */
.custom-login {
  /* 主题颜色 */
  --primary-color: #3370ff;
  /* 背景渐变色起始 */
  --bg-gradient-start: #e0f0ff;
  /* 背景渐变色结束 */
  --bg-gradient-end: #ffebf0;
  /* 按钮阴影颜色 */
  --button-shadow: rgba(51, 112, 255, 0.3);
  /* 输入框边框颜色 */
  --input-border-color: #e5e5e5;
  /* 文本主色 */
  --text-primary: #333;
  /* 文本次要色 */
  --text-secondary: #666;
  /* 文本提示色 */
  --text-hint: #999;
}

实现登录/注册功能

监听登录事件

复制代码<template>
  <yxtbxm-login1 @login-success="handleLoginSuccess"></yxtbxm-login1>
</template>

<script>
export default {
  methods: {
    handleLoginSuccess(data) {
      console.log('登录成功', data);
      // 进行后续操作，例如跳转页面、保存token等
    }
  }
}
</script>

监听注册事件

复制代码<template>
  <yxtbxm-register @register-success="handleRegisterSuccess"></yxtbxm-register>
</template>

<script>
export default {
  methods: {
    handleRegisterSuccess(data) {
      console.log('注册成功', data);
      // 进行后续操作
    }
  }
}
</script>

自定义验证规则

可通过修改组件内部的验证方法来自定义验证规则：

登录组件

复制代码methods: {
  // 自定义验证规则
  validateLogin() {
    // 自定义验证逻辑
    if (!this.account) {
      uni.showToast({ title: '请输入账号', icon: 'none' });
      return false;
    }

    // 自定义账号规则
    if (this.account.length < 4) {
      uni.showToast({ title: '账号长度不能少于4位', icon: 'none' });
      return false;
    }

    // 其他验证...
    return true;
  }
}

注册组件

复制代码methods: {
  // 自定义邮箱验证
  validateEmail(email) {
    // 自定义邮箱验证规则
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  }
}

常见问题

1. Q: 如何更改Logo图片?

   A: 可以通过传入logo-url属性来自定义Logo图片路径。

2. Q: 如何修改主题颜色?

   A: 通过CSS变量可以全局修改组件样式，详见"自定义样式"部分。

3. Q: 组件是否支持国际化?

   A: 目前组件支持通过修改标题和文本属性来适配不同语言，后续可能会增加国际化支持。

更新日志

v1.0.0 (2025-05-10)

• 首次发布
• 实现登录和注册功能
• 添加动画和交互效果
• 支持表单验证

作者

• Name: yxtbxm
• Email: 3519258420@qq.com

许可证

MIT