vue-rhythm-password

一个零依赖的 Vue 2/3 节奏密码组件，支持注册和验证功能。

什么是节奏密码？

节奏密码是一种基于输入节奏的二次认证方式。用户在输入数字密码时，组件会记录每个数字之间的停顿时间，形成独特的节奏模式。下次登录时，不仅密码要正确，输入的节奏也要匹配。

示例：密码 "123456"
────────────────────────────────────────────────────────────
用户输入：  1    2    3    4    5    6
           ↓    ↓    ↓         ↓    ↓    ↓
节奏记录：  "1" " " "23" " " "4" " " "56"
           └─────┘ └────┘ └────┘ └───┘
           节奏段1  节奏段2  节奏段3  节奏段4

存储格式：[[1, "æ"], [2, "ææ"], [1, "æ"], [2, "ææ"]]
          ↑    ↑     ↑    ↑
         长度  特殊字符 (æ 替代实际数字)
────────────────────────────────────────────────────────────

特性

• 零依赖 - 不依赖任何 UI 框架或网络库
• Vue 2/3 兼容 - 使用 Options API，原生支持 Vue 2.6+ 和 Vue 3.0+
• 灵活的网络层 - 支持内置请求、自定义函数或纯事件模式
• 可定制样式 - CSS 变量支持，轻松定制主题
• TypeScript 支持 - 提供完整的类型定义

安装

npm install vue-rhythm-password
# 或
yarn add vue-rhythm-password
# 或
pnpm add vue-rhythm-password

快速开始

基础用法 - 注册组件

<template>
  <RhythmRegister
    :api-config="{
      baseUrl: 'https://api.yourserver.com',
      version: 'v0',
      accessToken: 'user-token'
    }"
    @success="onSuccess"
    @fail="onFail"
  />
</template>

<script>
import { RhythmRegister } from 'vue-rhythm-password'

export default {
  components: { RhythmRegister },
  methods: {
    onSuccess(response) {
      console.log('注册成功', response)
    },
    onFail(error) {
      console.error('注册失败', error)
    }
  }
}
</script>

基础用法 - 验证组件

<template>
  <RhythmVerify
    :api-config="{
      baseUrl: 'https://api.yourserver.com',
      version: 'v0',
      accessToken: 'user-token'
    }"
    @success="onSuccess"
    @fail="onFail"
  />
</template>

<script>
import { RhythmVerify } from 'vue-rhythm-password'

export default {
  components: { RhythmVerify }
}
</script>

使用模式

模式 1：内置请求（推荐）

组件内置了网络请求功能，只需配置 API 地址即可：

<RhythmRegister
  :api-config="{
    baseUrl: 'https://api.yourserver.com',
    version: 'v0',
    accessToken: 'user-token'
  }"
/>

模式 2：自定义请求函数

如果需要使用 axios 或其他请求库：

<template>
  <RhythmRegister :request-fn="myRequest" />
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    async myRequest(data) {
      // data.password: 原始密码 "123456"
      // data.segments: 节奏数据 [[1,"æ"], [2,"ææ"], ...]
      const response = await axios.post('/api/my-register', data)
      return response.data
    }
  }
}
</script>

模式 3：纯事件模式

完全由你控制请求逻辑：

<template>
  <RhythmRegister
    :auto-submit="false"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  methods: {
    handleSubmit(data) {
      console.log('密码:', data.password)
      console.log('节奏:', data.segments)
      // 自己处理网络请求
    }
  }
}
</script>

API 文档

RhythmRegister Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | passwordLength | Number | 6 | 支付密码长度 | | verifyNumber | Number | 2 | 验证次数（需要重复输入几次） | | specialChar | String | 'æ' | 存储节奏的特殊字符 | | apiConfig | Object | null | API 配置（见下方） | | requestFn | Function | null | 自定义请求函数 | | autoSubmit | Boolean | true | 是否自动提交 | | uiConfig | Object | {} | UI 配置（颜色、主题等） | | i18n | Object | {} | 国际化文案配置 |

apiConfig

{
  baseUrl: 'https://api.yourserver.com',  // API 基础地址
  version: 'v0',                           // API 版本
  accessToken: 'your-token',               // 访问令牌
  timeout: 15000                           // 请求超时时间（毫秒）
}

uiConfig

{
  theme: 'light',                          // 主题
  colors: {
    correct: '#29CDA3',                    // 正确颜色
    error: '#FF4136',                      // 错误颜色
    primary: '#188BFE',                    // 主色调
    default: '#f8f9fa'                     // 默认颜色
  },
  showPasswordIcon: true,                  // 显示密码显隐按钮
  bubbleAnimation: true                    // 气泡动画
}

i18n

{
  inputHint: '请按自定义节奏输入您的支付密码',
  verifyHint: '根据第一次节奏输入密码',
  submitText: '开始认证',
  agreementText: '确认牢记节奏密码'
}

Events

| 事件 | 参数 | 说明 | |------|------|------| | submit | { password, segments } | 提交时触发 | | success | response | 成功时触发 | | fail | error | 失败时触发 | | input-origin-password | char | 原始密码输入单个字符 | | input-complete-password | password | 完整密码输入完成 | | rhythm-detected | { segments } | 节奏检测到 |

RhythmVerify Props

与 RhythmRegister 类似，额外支持：

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | showCancel | Boolean | true | 是否显示取消按钮 | | submitText | String | '确认' | 提交按钮文字 | | cancelText | String | '取消' | 取消按钮文字 |

RhythmVerify Events

额外支持 cancel 事件。

样式定制

CSS 变量

组件使用 CSS 变量，可以轻松覆盖：

/* 在你的全局样式中 */
:root {
  --rp-color-primary: #custom-color;
  --rp-color-correct: #custom-green;
  --rp-color-error: #custom-red;
  --rp-space-md: 12px;
  /* ... 更多变量 */
}

完整变量列表

/* 颜色 */
--rp-color-primary: #188BFE;
--rp-color-correct: #29CDA3;
--rp-color-error: #FF4136;
--rp-color-default: #f8f9fa;

/* 间距 */
--rp-space-xs: 4px;
--rp-space-sm: 8px;
--rp-space-md: 12px;
--rp-space-lg: 16px;
--rp-space-xl: 24px;

/* 圆角 */
--rp-radius-sm: 4px;
--rp-radius-md: 8px;
--rp-radius-lg: 12px;
--rp-radius-full: 9999px;

/* 字体 */
--rp-font-size-sm: 12px;
--rp-font-size-md: 14px;
--rp-font-size-lg: 16px;

开源协议

MIT

作者

厦门节奏因子智能科技有限公司

注意： 本组件需要配合支持节奏密码验证的后端服务使用。如需接入服务，请联系我们获取 API 密钥。