PlateKeyBoard 车牌号输入键盘

介绍

PlateKeyBoard 是一个专为中国车牌号输入设计的键盘组件，支持普通车牌和新能源车牌的输入，提供直观的输入体验。

导入

import PlateKeyBoard from '@/components/keyboard/PlateKeyBoard.vue'

使用方法

基础用法

PlateKeyBoard 组件通过 v-model:show 控制显示与隐藏，并通过 input 和 delete 事件处理输入内容。

<template>
  <view>
    <CellGroup round inset>
      <Field v-model="text" placeholder="请输入车牌号" />
    </CellGroup>

    <Height :size="20" />

    <CellGroup round inset>
      <Cell title="弹出车牌号键盘" showArrow touchable @click="check1 = true" />
    </CellGroup>

    <PlateKeyBoard
      v-model:show="check1"
      @input="onInput"
      @delete="onDelete"
      @blur="check1 = false"
    />
  </view>
</template>

<script setup lang="ts">
import Cell from '@/components/basic/Cell.vue';
import CellGroup from '@/components/basic/CellGroup.vue';
import DemoPage from '@/components/demo/DemoPage.vue';
import Field from '@/components/form/Field.vue';
import PlateKeyBoard from '@/components/keyboard/PlateKeyBoard.vue';
import Height from '@/components/layout/space/Height.vue';
import { ref } from 'vue';

const check1 = ref(false);
const text = ref('');

function onInput(value: string) {
  text.value += value;
};
function onDelete() {
  text.value = text.value.substring(0, text.value.length - 1)
};
</script>

API 参考

PlateKeyBoard

车牌号输入键盘组件。

Props

名称	说明	类型	必填	默认值
v-model:show	是否显示键盘	boolean	是	false
mask	是否显示键盘遮罩，显示遮罩时无法操作下方组件	boolean	否	false
title	键盘标题	string	否	-
showFinishButton	是否显示完成按钮	boolean	否	true
showDeleteButton	是否显示删除按钮	boolean	否	true
finishButtonText	完成按钮文字	string	否	'完成'
deleteButtonText	删除按钮文字	string	否	'删除'
keyHeight	按键高度	number	否	100
keyboardHeight	键盘高度(容纳多少行)	number	否	8
keyColumCount	每行按键数	number	否	7
keyStyle	自定义按键的样式	ViewStyle	否	-
keyTextStyle	自定义按键文字的样式	TextStyle	否	-
keyColor	按键的背景颜色	string	否	'white'
keyTextColor	完成按键的文字颜色	string	否	'black'
keyPressedColor	自定义按键按下时的颜色	string	否	'pressed.white'
keyPressedImpactFeedback	按键按下时是否有触感反馈	boolean	否	true
keysProvinceText	自定义车牌省选项	string[]	否	KeysProvinceText
keysNumberText	自定义车牌数字选项	string[]	否	KeysNumberText
keysWordText	自定义车牌字母选项	string[]	否	KeysWordText
keysLastWordText	自定义车牌尾字选项	string[]	否	KeysLastWordText

默认按键

默认按键数组定义，可以从 PlateKeyBoardDefine 中导入。

import { 
  KeysProvinceText, // 默认车牌省选项
  KeysNumberText, // 默认车牌数字选项
  KeysWordText, // 默认车牌字母选项
  KeysLastWordText // 默认车牌尾字选项
} from '@/components/keyboard/PlateKeyBoardDefine'

Events

名称	说明	参数
input	输入字符时触发	string 输入的字符
delete	删除字符时触发	-
finish	完成输入时触发	-
cancel	取消输入时触发	-
blur	键盘失焦时触发	-

主题变量

名称	类型	默认值	说明
PlateKeyBoardShowFinishButton	boolean	true	是否显示完成按钮
PlateKeyBoardShowDeleteButton	boolean	true	是否显示删除按钮
PlateKeyBoardFinishButtonText	string	'完成'	完成按钮文字
PlateKeyBoardDeleteButtonText	string	'删除'	删除按钮文字
PlateKeyBoardKeyHeight	number	100	按键高度
PlateKeyBoardKeyColor	string	'white'	按键的背景颜色
PlateKeyBoardKeyTextColor	string	'black'	按键文字颜色
PlateKeyBoardKeyPressedColor	string	'pressed.white'	按键按下时的颜色
PlateKeyBoardKeyPressedImpactFeedback	boolean	true	按键按下时是否有触感反馈
PlateKeyBoardKeyPadBackgroundColor	string	'light'	键盘区域背景颜色
PlateKeyBoardKeyMargin	number	7	按键间距
PlateKeyBoardTitleColor	string	'black'	标题文字颜色
PlateKeyBoardTitleFontSize	number	32	标题文字大小
PlateKeyBoardKeyFontSize	number	34	按键文字大小
PlateKeyBoardDotMargin	number	10	分隔点边距
PlateKeyBoardDotWidth	number	10	分隔点宽度
PlateKeyBoardDotHeight	number	10	分隔点高度
PlateKeyBoardDotBackgroundColor	string	'text.second'	分隔点背景颜色
PlateKeyBoardDotBorderRadius	number	10	分隔点圆角半径