更新记录
v0.1.0(2026-02-14) 下载此版本
首次上传
平台兼容性
uni-app(3.6.17)
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| - | √ | √ | √ | √ | - | √ | √ | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| - | - | - | - | - | - | - | - | - | - | - | - |
keyboard-pwd-popup
一个基于 UniApp 的支付密码弹窗组件,通过 Wot UI 组件实现
依赖说明
本组件依赖 Wot UI,请先前去安装
功能特性
- 数字键盘输入
- 自定义密码长度
- 是否明文显示
- 自动完成提交
使用示例
<template>
<keyboard-pwd-popup
v-model:visible="show"
@input-complete="handleComplete"
/>
</template>
<script setup lang="ts">
import { ref } from "vue"
import KeyboardPwdPopup from "@/components/keyboard-pwd-popup/keyboard-pwd-popup.vue"
const show = ref(false)
function handleComplete(password: string) {
console.log(password)
}
</script>
API
参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | 请输入支付密码 | 弹窗标题 |
| confirmText | string | 确定 | 键盘确认按钮文本 |
| visible | boolean | false | 控制弹窗显示 |
| maxLength | number | 6 | 密码最大长度 |
| showLengthHint | boolean | false | 是否显示长度提示 |
| mask | boolean | true | 是否隐藏密码 |
| autoConfirm | boolean | false | 输入完成是否自动确认 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| input-complete | (value: string) => void | 输入完成事件,用于处理密码弹窗输入完成后的事件 |
许可协议
MIT License,请查看项目根目录下的 LICENSE 文件。

收藏人数:
https://gitee.com/isixe/uniapp-vitesse-wot-one/blob/master/src/components/wot/popup/keyboard-pwd-popup.vue
下载插件并导入HBuilderX
赞赏(0)
下载 41
赞赏 0
下载 11248243
赞赏 1860
赞赏
京公网安备:11010802035340号