更新记录
1.0.0(2023-03-28)
下载此版本
添加颜色背景更改配置
平台兼容性
uni-app
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
√ |
√ |
√ |
√ |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
√ |
√ |
√ |
√ |
√ |
- |
√ |
√ |
√ |
√ |
其他
luanqing-code-input
参数说明
| 名称 |
说明 |
默认值 |
| itemSpace |
每个验证码输入框单元的间距,单位rpx |
20 |
| codeNumber |
验证码的位数,4,6 |
4 |
| autoFocus |
自动获取焦点 |
false |
| passwordMode |
密码模式,输入的数字会用*代替 |
false |
| itemBackgroundColor |
每个验证码输入框单元的背景色 |
'#007FFF' |
| itemTextColor |
每个验证码数值的文字颜色 |
'#FFFFFF' |
| itemBorderRadius |
每个验证码输入框的圆角度 |
12 |
| itemWidth |
每个验证码输入框的宽度,单位rpx |
80 |
| itemHeight |
每个验证码输入框的高度,单位rpx |
105 |
示例代码
<!-- 简单模式 -->
<luanqing-code-input style="margin-top: 108rpx;" @finish="inputFinish" :autoFocus="true"></luanqing-code-input>
<!-- 多配置模式 -->
<luanqing-code-input
style="margin-top: 50rpx;"
@finish="inputFinish"
@input="inputing"
:itemWidth="100"
:itemHeight="120"
:auto-focus="true"
:passwordMode="false">
</luanqing-code-input>
inputFinish(e){
console.log("输入的验证码",e);
},