hbis-sms-input 验证码输入组件

hbis-sms-input 是一个基于 Vue 3 的验证码输入组件，支持自定义样式和倒计时功能，适用于各种需要短信验证码验证的场景。

功能特性

• ✅ 支持自定义输入框样式
• ✅ 支持自定义按钮样式
• ✅ 内置倒计时功能
• ✅ 支持自定义倒计时时间
• ✅ 支持自定义提示文本
• ✅ 响应式设计

快速开始

安装

npm install @hbis-uni/components
# 或
pnpm add @hbis-uni/components

引入组件

// 全局引入
import { createApp } from 'vue'
import App from './App.vue'
import { HbisSmsInput } from '@hbis-uni/components'
import '@hbis-uni/components/dist/index.css'

const app = createApp(App)
app.component('hbis-sms-input', HbisSmsInput)
app.mount('#app')

// 按需引入
import { HbisSmsInput } from '@hbis-uni/components'
import '@hbis-uni/components/dist/hbis-smsInput/index.css'

export default {
  components: {
    HbisSmsInput
  }
}

基本使用

<template>
  <hbis-sms-input @custom-event="handleSendSMS" ref="smsInputRef" />
</template>

<script setup>
import { ref } from 'vue'
import { HbisSmsInput } from '@hbis-uni/components'

const smsInputRef = ref(null)

// 处理发送验证码事件
const handleSendSMS = () => {
  console.log('发送验证码')
  // 调用倒计时方法
  smsInputRef.value?.countDown()
}
</script>

属性说明

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | countDownTime | Number | 60 | 倒计时时间（秒） | | inputPlacheHolder | String | '请输入验证码' | 输入框提示文本 | | inputColor | String | '#F1F7FA' | 输入框背景色 | | inputTextColor | String | '#000' | 输入框输入文本颜色 | | inputPlacheHolderColor | String | '#F00' | 输入框提示文本颜色 | | smsCodeTimeText | String | 's' | 倒计时后拼接字符 | | smsCodeBtnText | String | '发送' | 发送验证码按钮文本 | | smsCodeBtnColor | String | '#FFF' | 发送验证码按钮颜色 | | smsCodeBtnTextColor | String | '#2E6DFF' | 发送验证码按钮文本颜色 |

事件说明

| 事件名 | 说明 | | --- | --- | | custom-event | 点击发送验证码按钮时触发 |

方法说明

| 方法名 | 说明 | | --- | --- | | countDown() | 开始倒计时 | | smsCode | 获取输入的验证码值 |

自定义样式示例

<template>
  <hbis-sms-input 
    @custom-event="handleSendSMS" 
    ref="smsInputRef"
    :count-down-time="120"
    :input-color="'#ffffff'"
    :input-text-color="'#333333'"
    :sms-code-btn-text="'获取验证码'"
    :sms-code-btn-color="'#409eff'"
    :sms-code-btn-text-color="'#ffffff'"
  />
</template>

注意事项

1. 组件默认使用内置样式，也可以通过属性自定义样式
2. 点击发送验证码按钮会触发 custom-event 事件，需要在父组件中处理发送验证码的逻辑
3. 倒计时功能需要调用组件的 countDown() 方法才能启动
4. 可以通过 smsCode 方法获取用户输入的验证码

浏览器支持

• Chrome (最新)
• Firefox (最新)
• Safari (最新)
• Edge (最新)

许可证

MIT