更新记录
1.1.12(2025-03-20) 下载此版本
添加边框类型 type 1 下边框 2 全边框 3 无边框
1.1.1(2025-03-20) 下载此版本
添加边框类型 type 1 下边框 2 全边框 3 无边框, 使用全边框
1.1.0(2025-03-20) 下载此版本
添加输入框类型 inputType 的类型有:1、 number(数字.默认) 2、text(文本输入框 数字、文本等等都可以输入)
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
xiaopao-code
1、组件直接导入到(uni-modules)即可,
使用:<xiaopao-code></xiaopao-code>
2、添加回调获取验证码方法 cbCode,
使用:<xiaopao-code @cbCode="cbCodeFun"></xiaopao-code>
3、添加是否展示倒计时 showTime 默认为 true,
使用:<xiaopao-code @cbCode="cbCodeFun" :showTime="true"></xiaopao-code>
4、执行开始倒计时直接调用组件的 doStart() 方法, 使用:
<xiaopao-code ref="xiaopaoCodeRef" @cbCode="cbCodeFun" :showTime="true"></xiaopao-code>
this.$refs.xiaopaoCodeRef && this.$refs.xiaopaoCodeRef.doStart() // 在获取验证码结束时,并在组件展示后进行调用
5、执行重新获取验证码方法 getCode(), 使用:
<xiaopao-code ref="xiaopaoCodeRef" @cbCode="cbCodeFun" :showTime="true" @getCode="getCodeFun"></xiaopao-code>
getCodeFun 为调用页面进行获取验证码的方法
6、重置边框样式, 使用:
<xiaopao-code
ref="xiaopaoCodeRef"
borderDefaultColor="#aaaaaa"
borderFocusColor="#86FFF7"
@cbCode="cbCodeFun"
@getCode="getCode">
</xiaopao-code>
注:
(1)、borderDefaultColor 为默认显示的边框色
(2)、borderFocusColor 光标作用展示的颜色
7、20250320添加输入框类型, 使用:
<xiaopao-code
ref="xiaopaoCodeRef"
inputType="text">
</xiaopao-code>
注:inputType 的类型有 number(数字.默认) text(文本输入框 数字、文本等等都可以输入)
8、添加边框类型 type 1 下边框 2 全边框 3 无边框, 使用全边框:
<xiaopao-code
ref="xiaopaoCodeRef"
:type="2">
</xiaopao-code>