当前位置：首页 > news >正文

鸿蒙OSUniApp 实现的数字键盘与密码输入框组件#三方框架 #Uniapp

news 来源：原创 2025/5/29 12:16:41

UniApp 实现的数字键盘与密码输入框组件

前言

在移动应用中，数字键盘与密码输入框广泛应用于支付、登录、验证等场景。一个体验良好的数字键盘和密码输入框组件，不仅能提升安全性，还能增强用户的输入体验。随着鸿蒙（HarmonyOS）生态的壮大，开发者对多端适配和高性能交互提出了更高要求。本文将以 UniApp 为例，详细讲解如何开发一个美观、实用、适配鸿蒙的数字键盘与密码输入框组件。

一、需求与设计思路

1. 需求分析

支持自定义密码长度（如6位、4位）
密码输入框支持明文/密文切换
数字键盘支持0-9、删除、完成等按键
输入完成自动回调，支持清空
兼容鸿蒙平台，适配不同分辨率
组件化设计，便于复用和扩展

2. 设计思路

密码输入框采用分格显示，支持密文圆点或明文
数字键盘采用自定义布局，按键响应灵敏
通过 props 传递长度、密文、回调等参数
组件间通过事件通信，提升解耦性
适配鸿蒙平台的安全键盘和交互动画

二、核心代码实现

1. 密码输入框组件

<template><view class="pwd-box" @click="$emit('focus')"><viewv-for="(v, i) in length":key="i"class="pwd-cell":class="{ active: i === value.length }"><text v-if="value[i] && !plain">●</text><text v-else>{{ value[i] || '' }}</text></view></view>
</template>

<script>
export default {name: 'PwdInput',props: {value: { type: String, default: '' },length: { type: Number, default: 6 },plain: { type: Boolean, default: false },},
};
</script>

<style scoped>
.pwd-box {display: flex;justify-content: space-between;align-items: center;background: #fff;border-radius: 12rpx;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);padding: 0 12rpx;height: 88rpx;margin-bottom: 32rpx;cursor: pointer;
}
.pwd-cell {width: 56rpx;height: 56rpx;border-bottom: 3rpx solid #eee;text-align: center;font-size: 36rpx;color: #222;line-height: 56rpx;margin: 0 8rpx;transition: border-color 0.2s;
}
.pwd-cell.active {border-color: #007aff;
}
</style>

2. 数字键盘组件

<template><view class="num-keyboard"><view class="key-row" v-for="row in keys" :key="row.join('')"><viewv-for="key in row":key="key"class="key":class="{ del: key === 'del', ok: key === 'ok' }"@click="onKey(key)"><text v-if="key === 'del'">⌫</text><text v-else-if="key === 'ok'">完成</text><text v-else>{{ key }}</text></view></view></view>
</template>

<script>
export default {name: 'NumKeyboard',props: {disabled: { type: Boolean, default: false },},data() {return {keys: [['1', '2', '3'],['4', '5', '6'],['7', '8', '9'],['del', '0', 'ok'],],};},methods: {onKey(key) {if (this.disabled) return;this.$emit('press', key);},},
};
</script>

<style scoped>
.num-keyboard {background: #fff;border-radius: 18rpx;box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);padding: 24rpx 0 12rpx 0;user-select: none;
}
.key-row {display: flex;justify-content: space-around;margin-bottom: 18rpx;
}
.key {width: 96rpx;height: 64rpx;background: #f7f7fa;border-radius: 12rpx;text-align: center;line-height: 64rpx;font-size: 32rpx;color: #222;margin: 0 8rpx;transition: background 0.2s;cursor: pointer;
}
.key:active {background: #e6f7ff;color: #007aff;
}
.key.del {color: #ff4d4f;
}
.key.ok {background: #007aff;color: #fff;
}
</style>

3. 父页面集成与使用示例

<template><view><pwd-input :value="pwd" :length="6" :plain="plain" @focus="showKeyboard = true" /><view class="toggle-plain" @click="plain = !plain"><text>{{ plain ? '显示密文' : '显示明文' }}</text></view><num-keyboard v-if="showKeyboard" @press="onKeyPress" /></view>
</template><script>
import PwdInput from '@/components/PwdInput.vue';
import NumKeyboard from '@/components/NumKeyboard.vue';
export default {components: { PwdInput, NumKeyboard },data() {return {pwd: '',plain: false,showKeyboard: false,};},methods: {onKeyPress(key) {if (key === 'del') {this.pwd = this.pwd.slice(0, -1);} else if (key === 'ok') {this.showKeyboard = false;uni.showToast({ title: `输入完成：${this.pwd}`, icon: 'none' });} else if (this.pwd.length < 6) {this.pwd += key;if (this.pwd.length === 6) {this.showKeyboard = false;uni.showToast({ title: `输入完成：${this.pwd}`, icon: 'none' });}}},},
};
</script><style scoped>
.toggle-plain {text-align: right;color: #007aff;font-size: 26rpx;margin-bottom: 24rpx;cursor: pointer;
}
</style>