银行卡号输入键盘组件

应用场景

该组件适用于需要用户输入银行卡号的场景，例如在线支付、身份验证等。它提供了一个直观易用的键盘界面，方便用户输入卡号。

基本功能

• 提供数字键盘，用户可通过点击按钮输入卡号。
• 支持删除已输入的数字。
• 输入过程中实时显示卡号。
• 当卡号输入完成后，触发回调函数。

功能实现步骤及关键代码分析

1. 创建一个 Vue 组件

首先，创建一个 Vue 组件来实现键盘功能：

<template>
  <div class="flex flex-col items-center justify-center min-h-screen py-2">
    <div class="bg-white rounded-lg shadow-lg w-1/2">
      <div class="flex justify-between items-center p-4 border-b border-gray-200">
        <div class="flex items-center">
          <img src="https://source.unsplash.com/random/40x40" alt="" class="w-8 h-8 rounded-full" />
          <div class="ml-4 text-lg font-semibold">Visa</div>
        </div>
        <div>
          <img src="https://source.unsplash.com/random/40x40" alt="" class="w-8 h-8 rounded-full" />
        </div>
      </div>
      <div class="p-4">
        <div class="text-lg font-semibold">Let's start with your card number.</div>
        <div class="mt-4">
          <input type="text" class="w-full px-4 py-2 text-lg font-semibold border border-gray-300 rounded-lg focus:outline-none focus:border-gray-400" placeholder="4201 5 | ---- ---- ----" />
        </div>
        <div class="grid grid-cols-3 gap-4 mt-8">
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">1</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">2</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">3</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">4</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">5</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">6</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">7</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">8</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">9</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">0</button>
          <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">0</button>
          <button class="w-full h-12 bg-red-500 rounded-lg text-lg font-semibold focus:outline-none focus:bg-red-600"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';

const cardNumber = ref('');
</script>

<style>
.grid {
  @apply grid-cols-3;
  gap: 1rem;
}

button {
  @apply w-full;
  h-12;
  rounded-lg;
  text-lg;
  font-semibold;
  focus:outline-none;
}

button:hover {
  @apply bg-gray-300;
}

button:active {
  @apply bg-gray-400;
}
</style>

2. 存储卡号

使用 Vue 的 ref API 存储输入的卡号：

const cardNumber = ref('');

3. 创建键盘按钮

使用 v-for 循环创建数字键盘按钮：

<div class="grid grid-cols-3 gap-4 mt-8">
  <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300" v-for="n in 10" :key="n">{{ n }}</button>
  <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">0</button>
  <button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300">0</button>
  <button class="w-full h-12 bg-red-500 rounded-lg text-lg font-semibold focus:outline-none focus:bg-red-600"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  </svg></button>
</div>

4. 处理按钮点击事件

为每个按钮添加 @click 事件处理程序，用于更新卡号：

<button class="w-full h-12 bg-gray-200 rounded-lg text-lg font-semibold focus:outline-none focus:bg-gray-300" v-for="n in 10" :key="n" @click="cardNumber.value += n">{{ n }}</button>

5. 删除按钮

添加一个删除按钮，用于删除已输入的数字：

<button class="w-full h-12 bg-red-500 rounded-lg text-lg font-semibold focus:outline-none focus:bg-red-600" @click="cardNumber.value = cardNumber.value.slice(0, -1)"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg></button>

总结与展望

开发过程中的经验与收获

• 使用 Vue 的 ref API 管理组件状态。
• 使用 v-for 循环创建可重复使用的组件元素。