更新记录

1.0.2(2025-03-22) 下载此版本

修复*号显示

1.0.1(2025-03-22) 下载此版本

删掉组件内md文件中img图片不生效,减小文件大小,修复showPwd为true时还显示*星号

1.0.0(2025-03-22) 下载此版本

传入类型、是否明文、格子宽高、自定义样式、主题色、间距、最大长度

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.95 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

gbm-pwd

只实现了中间6个输入框格子,弹窗请配合uv-uipopup组件

只实现了h5端使用,微信小程序未测试

缺点:写在uv-ui的popup里面时,如果是bottom弹出,那么输入法会盖住这个popup弹窗。所以我项目用了center弹出

使用方法

Vue2

基础用法

<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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问