更新记录

1.0.0（2026-07-03） 下载此版本

初始版本

平台兼容性

uni-app(4.0)

zv-numeric-keypad

数字键盘组件，支持手机号、金额、身份证、数字密码等多种模式，默认隐藏，从底部弹出。

基础用法

<zv-numeric-keypad v-model="mobile" mode="phone" />

参数说明

mode 模式

事件

方法（通过 ref 调用）

使用示例

基础：点击触发区域弹出

<template>
    <view>
        <zv-numeric-keypad
            v-model="mobile"
            mode="phone"
            placeholder="请输入手机号"
            :contentStyle="contentStyle"
        />
    </view>
</template>

<script>
export default {
    data() {
        return {
            mobile: '',
            contentStyle: 'line-height: 100rpx; text-align: right;'
        }
    }
}
</script>

通过 visible 控制显示

<zv-numeric-keypad
    v-model="price"
    v-model:visible="showKeypad"
    mode="amount"
    :trigger="false"
/>

<button @click="showKeypad = true">打开金额键盘</button>

通过 ref 手动调用

<zv-numeric-keypad ref="keypad" v-model="password" mode="passwordChaos" :trigger="false" />

<button @click="$refs.keypad.open()">打开密码键盘</button>

确认后回传

<zv-numeric-keypad
    v-model="idcard"
    mode="idcard"
    :showConfirm="true"
    @confirm="onConfirm"
/>

各模式示例

<!-- 手机号 -->
<zv-numeric-keypad v-model="mobile" mode="phone" placeholder="请输入手机号" />

<!-- 金额（可关闭小数点） -->
<zv-numeric-keypad v-model="price" mode="amount" :showPoint="true" />

<!-- 身份证 -->
<zv-numeric-keypad v-model="idcard" mode="idcard" />

<!-- 数字密码 -->
<zv-numeric-keypad v-model="pwd" mode="password" :maxLength="6" />

<!-- 乱序密码 -->
<zv-numeric-keypad v-model="pwd" mode="passwordChaos" :showConfirm="true" />

自定义删除 / 确认键样式

<zv-numeric-keypad
    v-model="mobile"
    mode="phone"
    :showConfirm="true"
    deleteText="删除"
    :deleteStyle="deleteStyle"
    :deleteActiveStyle="deleteActiveStyle"
    confirmText="完成"
    :confirmStyle="confirmStyle"
    :confirmActiveStyle="confirmActiveStyle"
/>

data() {
    return {
        deleteStyle: 'color: #ff3b30; font-size: 28rpx; background: #fff; border-radius: 16rpx; box-shadow: 0 6rpx 0 #e5e5e5;',
        deleteActiveStyle: 'color: #ff3b30; font-size: 28rpx; background: #f0f0f0; border-radius: 16rpx; transform: translateY(6rpx);',
        confirmStyle: 'color: #fff; font-size: 32rpx; background: linear-gradient(180deg, #ff6b6b, #ee5253); border-radius: 16rpx; box-shadow: 0 6rpx 0 #c0392b;',
        confirmActiveStyle: 'color: #fff; font-size: 32rpx; background: #ee5253; border-radius: 16rpx; transform: translateY(6rpx); box-shadow: 0 2rpx 6rpx rgba(238,82,83,0.3);'
    }
}

也可通过 slot 完全自定义按钮内容：

<zv-numeric-keypad v-model="mobile" mode="phone" :showConfirm="true">
    <template #delete>
        <image src="/static/delete.png" style="width: 48rpx; height: 48rpx;" />
    </template>
    <template #confirm>
        <text style="color: #fff;">提交</text>
    </template>
</zv-numeric-keypad>