更新记录
1.0.2(2025-03-22) 下载此版本
修复*号显示
1.0.1(2025-03-22) 下载此版本
删掉组件内md文件中img图片不生效,减小文件大小,修复showPwd为true时还显示*星号
1.0.0(2025-03-22) 下载此版本
传入类型、是否明文、格子宽高、自定义样式、主题色、间距、最大长度
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | × | √ | √ | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
gbm-pwd
只实现了中间6个输入框格子,弹窗请配合uv-ui的popup组件
只实现了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 |