引入组件

局部引入

// parent.vue
const FPlateKeyboard = defineAsyncComponent(() => import('@/components/formaui/f-plate-keyboard/f-plate-keyboard.vue'))

基础用法

v-model控制显隐；首字为省份简称盘，后续为字母数字盘（不含 I、O）。

<f-plate-keyboard v-model="showKeyboard" @item-click="onItemClick" @cancel="onCancel">
  <view class="kb-header">
    <view class="kb-title">请输入车牌号</view>
    <f-plate-input v-model="plateValue" plate-color="blue" />
  </view>
</f-plate-keyboard>
<f-button width="320rpx" margin="200rpx auto" @click="open">打开车牌键盘</f-button>

import { ref } from 'vue'

const showKeyboard = ref(false)
const plateValue = ref('')

const open = () => {
  plateValue.value = ''
  showKeyboard.value = true
}

const onItemClick = (value: string) => {
  plateValue.value = value
  if (value.length >= 8) {
    uni.showToast({ title: value, icon: 'none' })
    showKeyboard.value = false
  }
}

const onCancel = () => {}

键盘布局

阶段	说明
省份盘	输入长度为 0，或点击「省份」强制改首字时展示 31 个省份简称
字母数字盘	已有首字后展示 0-9 + 字母（无 I、O）

功能键：

• 取消：关闭键盘并触发 cancel
• 删除：删除末位字符
• 省份：切回省份盘以修改首字

最大长度

maxLength属性：车牌最大长度（默认8）

达到上限后不再追加字符。

<f-plate-keyboard v-model="showKeyboard" :max-length="8" @item-click="onItemClick" />

遮罩与动画

isMask / closeOnClickMask / isAnimate

<f-plate-keyboard
  v-model="showKeyboard"
  :is-mask="true"
  :close-on-click-mask="true"
  :is-animate="true"
  @item-click="onItemClick" />

文案与样式

按钮文案：cancelText、delText、provinceText

<f-plate-keyboard
  v-model="showKeyboard"
  cancel-text="关闭"
  del-text="回退"
  province-text="改省份"
  @item-click="onItemClick" />

颜色与圆角：borderRadius、fontSize、textColor、bgColor、cancelColor、cancelBgColor、delColor、delBgColor

<f-plate-keyboard
  v-model="showKeyboard"
  border-radius="24rpx"
  font-size="30rpx"
  text-color="#0B1D4A"
  bg-color="#FFFFFF"
  @item-click="onItemClick" />

键盘样式默认读取全局 uni.$fui.fKeyboard（与数字键盘共用配置块）。

与格子组件组合

f-plate-input 仅负责展示；输入逻辑由本组件完成。完整示例见演示页 /extends/plate。

<f-plate-input v-model="plateValue" :plate-color="plateColor" @click="showKeyboard = true" />
<f-plate-keyboard v-model="showKeyboard" @item-click="(v) => (plateValue = v)" />

注意：键盘打开时会清空内部临时字符串，请通过 itemClick 同步到外部。

插槽

名称	说明
default	键盘上方内容（常放车牌格子）

属性

名称	类型	说明	默认值
v-model	boolean	是否显示键盘	false
isMask	boolean	是否显示遮罩层	true
closeOnClickMask	boolean	是否点击遮罩层关闭键盘	true
isAnimate	boolean	是否显示动画	true
borderRadius	string	自定义圆角大小	16rpx
fontSize	string	自定义字体大小	32rpx
textColor	string	自定义字体颜色	主题色
cancelText	string	自定义取消按钮文字	取消
cancelColor	string	自定义取消按钮字体颜色	主题色
cancelBgColor	string	自定义取消按钮背景颜色	#E7E6EB
delText	string	自定义删除按钮文字	删除
delColor	string	自定义删除按钮字体颜色	主题色
delBgColor	string	自定义删除按钮背景颜色	#E7E6EB
provinceText	string	切换省份键盘按钮文字	省份
bgColor	string	自定义键盘背景颜色	#FFFFFF
maxLength	number	车牌最大长度	8
zIndex	number	自定义键盘 z-index	12000

事件

事件名	说明	回调参数
itemClick	按键后触发，参数为当前临时车牌字符串	string（当前值）
cancel	取消或点击遮罩关闭时触发	-

方法

方法名	说明	传入参数
-	-	-