更新记录
1.0.1(2025-03-31)
简单易用的,密码输入软键盘
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | √ | √ | √ | √ | √ |
引用
导入组件包
使用
Vue:
# 结合uni-popup 组件
<uni-popup ref="keypadRef" type="bottom">
<x-NumericKeypad
title="请输入6位资金密码"
:length="6"
:bottom="true"
@confirm="confirmPassword">
</x-NumericKeypad>
</uni-popup>
# title 为标题
# length 为密码长度
# bottom 为是否为底部预留高度
# confirm 为确认事件 回调返回 pwd
Script:
<script setup>
import {onMounted, ref} from 'vue';
const keypadRef = ref();
// 确认事件
const confirmPassword = (pwd) => {
console.log(pwd)
keypadRef.value.close();
}
onMounted(() => {
keypadRef.value.open();
})
</script>