更新记录

1.0.0（2025-12-11） 下载此版本

无

平台兼容性

键盘组件库使用说明

本项目包含三个自定义键盘组件：身份证键盘、数字键盘和车牌键盘。以下是各组件的详细使用说明。

目录结构

注意：组件存放于 conponents 目录下（请留意目录拼写）。

keyboard_demo/
└── conponents/
    └── keyboard/
        ├── IdCardKeyboard.vue    # 身份证键盘
        ├── NumberKeyboard.vue    # 数字键盘
        └── VehicleKeyboard.vue   # 车牌键盘

组件通用说明

所有组件均支持以下特性：

• 支持 v-model 双向绑定。
• 提供 open() 方法主动唤起键盘。
• 提供 onDone 事件监听完成操作。
• 点击遮罩层或顶部收起图标可关闭键盘。

1. 身份证键盘 (IdCardKeyboard)

专用于身份证号码输入，包含数字 0-9 和 X 键。

引入方式

import IdCardKeyboard from '@/conponents/keyboard/IdCardKeyboard.vue'

Props (属性)

Methods (方法)

Events (事件)

2. 数字键盘 (NumberKeyboard)

通用数字键盘，适用于手机号、验证码等纯数字输入场景。

引入方式

import NumberKeyboard from '@/conponents/keyboard/NumberKeyboard.vue'

Props (属性)

Methods (方法)

Events (事件)

3. 车牌键盘 (VehicleKeyboard)

专用于车牌号码输入，自动切换省份简称（首位）和字母数字键盘。

引入方式

import VehicleKeyboard from '@/conponents/keyboard/VehicleKeyboard.vue'

Props (属性)

Methods (方法)

Events (事件)

完整使用示例

<template>
  <view class="content">
    <!-- 身份证键盘示例 -->
    <view class="input-box" @click="openIdCard">
      <text>{{ idCardVal || '请输入身份证号' }}</text>
    </view>
    <id-card-keyboard 
      ref="idCardKeyboard" 
      v-model="idCardVal" 
      @onDone="onIdCardDone"
    />

    <!-- 数字键盘示例 -->
    <view class="input-box" @click="openNumber">
      <text>{{ numberVal || '请输入手机号' }}</text>
    </view>
    <number-keyboard 
      ref="numberKeyboard" 
      v-model="numberVal" 
      title="请输入手机号" 
      :maxLength="11" 
      @onDone="onNumberDone"
    />

    <!-- 车牌键盘示例 -->
    <view class="input-box" @click="openVehicle">
      <text>{{ vehicleVal || '请输入车牌号' }}</text>
    </view>
    <vehicle-keyboard 
      ref="vehicleKeyboard" 
      v-model="vehicleVal" 
      @onDone="onVehicleDone"
    />
  </view>
</template>

<script>
import IdCardKeyboard from '@/conponents/keyboard/IdCardKeyboard.vue'
import NumberKeyboard from '@/conponents/keyboard/NumberKeyboard.vue'
import VehicleKeyboard from '@/conponents/keyboard/VehicleKeyboard.vue'

export default {
  components: {
    IdCardKeyboard,
    NumberKeyboard,
    VehicleKeyboard
  },
  data() {
    return {
      idCardVal: '',
      numberVal: '',
      vehicleVal: ''
    }
  },
  methods: {
    // 打开身份证键盘
    openIdCard() {
      this.$refs.idCardKeyboard.open()
    },
    onIdCardDone(val) {
      console.log('身份证输入完成:', val)
    },

    // 打开数字键盘
    openNumber() {
      this.$refs.numberKeyboard.open()
    },
    onNumberDone(val) {
      console.log('数字输入完成:', val)
    },

    // 打开车牌键盘
    openVehicle() {
      this.$refs.vehicleKeyboard.open()
    },
    onVehicleDone(val) {
      console.log('车牌输入完成:', val)
    }
  }
}
</script>

注意事项

1. 图标依赖: 组件内部使用了 cuIcon-unfold 图标类名（ColorUI），如果你的项目中没有引入相关字体图标库，键盘顶部的下拉图标可能无法显示。你可以修改组件代码中的 text 标签，替换为你项目中使用的图标或图片。
2. 样式: 组件使用了 scss，请确保项目已安装并配置了 sass/scss 预处理器。