使用vant的密码输入框，数字键盘

最新推荐文章于 2025-02-24 11:29:55 发布

uuai

最新推荐文章于 2025-02-24 11:29:55 发布

阅读量1.1w

点赞数

分类专栏： vue

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个基于Vue框架和Vant UI库的支付密码输入与数字键盘实现案例。通过HTML、CSS和JavaScript代码，展示了如何创建一个固定在屏幕底部的支付密码输入框，并配合数字键盘进行交互。该示例包括了密码输入和删除的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vant</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.4/lib/index.css">
    <style>
        .van-popup {
            transform: none;
        }

        .pay_password {
            background: #FAFAFA;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 63%;
        }

        .password_input {
            position: fixed;
            left: 0;
            bottom: 250px;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <van-popup v-model="show">
        <div class="pay_password" >
            <!-- 密码输入框 -->
            <div class="password_input">
                <p style="text-align: center">支付</p>
                <van-password-input
                        :value="value"
                />
            </div>
            <!--键盘-->
            <van-number-keyboard
                    :show="show"
                    @blur="show = false"
                    @input="onInput"
                    @delete="onDelete"
            />
        </div>
    </van-popup>

</div>
</body>
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@1.4/lib/vant.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            value: '123',
            showKeyboard: true,
            show: true
        },
        methods: {
            onInput(key) {
                this.value = (this.value + key).slice(0, 6);
            },
            onDelete() {
                this.value = this.value.slice(0, this.value.length - 1);
            }
        }
    })
</script>
</html>