更新记录
1.0.2(2025-03-22)
下载此版本
修复*号显示
1.0.1(2025-03-22)
下载此版本
删掉组件内md文件中img图片不生效,减小文件大小,修复showPwd为true时还显示*星号
1.0.0(2025-03-22)
下载此版本
传入类型、是否明文、格子宽高、自定义样式、主题色、间距、最大长度
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.95 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
× |
× |
× |
× |
× |
gbm-pwd
只实现了中间6个输入框格子,弹窗请配合uv-ui的popup组件
只实现了h5端使用,微信小程序未测试
缺点:写在uv-ui的popup里面时,如果是bottom弹出,那么输入法会盖住这个popup弹窗。所以我项目用了center弹出
使用方法
基础用法
<gbm-pwd ref="gbmPwd" :maxlength="6" color="#1b5585" @confirm="onPwdCompleted"></gbm-pwd>
import gbmPwd from '@/components/gbm-pwd/gbm-pwd.vue';
// 密码输入完成
onPwdCompleted(pwd) {
console.log('onPwdCompleted', pwd);
}
属性值(标签传入)
参数名 |
类型 |
默认值 |
说明 |
type |
number|string |
number |
调用输入法时,键盘对应的值 |
showPwd |
boolean |
false |
是否展示明文,默认不可见 |
gridWidth |
number|string |
80 |
格子的宽高,默认rpx,传入可以不带单位 |
gridHeight |
number|string |
80 |
|
customStyle |
Object |
|
单元格样式 |
color |
string |
#3399cc |
默认选中边框颜色 |
gridSpacing |
string |
10rpx |
每个输入框格子的间距 |
maxlength |
number |
6 |
输入框的格子长度 |
Methods
方法名 |
返回参数 |
说明 |
clear |
|
清空输入框 |
focus |
|
聚焦,如果是弹窗后聚焦,要写在$nextTick里面 |
|
|
|
// 案例
this.$nextTick(() => {
this.$refs.gbmPwd.focus(); // 聚焦
});
this.$refs.gbmPwd.clear(); // 清空
event
事件名 |
返回参数 |
说明 |
input |
value |
每次改变后返回value,1,12,123依次类推 |
confirm |
value |
刚好满足最大长度的值,例如6位,返回123456 |
|
|
|