引入组件

局部引入

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

基础用法

v-model绑定车牌字符串；点击格子触发 click（不弹键盘，需页面配合 f-plate-keyboard）。

<f-plate-input v-model="plateValue" plate-color="blue" @click="showKeyboard = true" />

import { ref } from 'vue'

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

默认 length 为 8：末格为空时显示「+」（新能源位）；前两格随 plateColor 着色。

车牌颜色

plateColor属性：前两格底色（默认blue）

可传入[blue、yellow、green、white]。

<f-plate-input v-model="blue" plate-color="blue" />
<f-plate-input v-model="yellow" plate-color="yellow" />
<f-plate-input v-model="green" plate-color="green" />
<f-plate-input v-model="white" plate-color="white" />

const blue = ref('京A12345')
const yellow = ref('京B88888')
const green = ref('京AD12345')
const white = ref('京C00001')

自定义尺寸

width / height / fontSize / gap

<f-plate-input v-model="plateValue" plate-color="blue" width="64rpx" height="72rpx" font-size="28rpx" gap="6rpx" />

与键盘组合

典型流程：点击格子打开 f-plate-keyboard，在 @item-click 中回写 v-model。

<f-plate-input v-model="plateValue" :plate-color="plateColor" @click="openKeyboard" />
<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="plateColor" />
  </view>
</f-plate-keyboard>

import type { FPlateColor } from '@/components/formaui/f-plate-input/types'
import { ref } from 'vue'

const showKeyboard = ref(false)
const plateValue = ref('')
const plateColor = ref<FPlateColor>('blue')

const openKeyboard = () => {
  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 = () => {}

说明：键盘每次打开会清空内部临时值，需以 @item-click 回传结果为准。

插槽

名称	说明
-	-

属性

名称	类型	说明	默认值
v-model	string	车牌字符串	''
length	number	格子位数（含新能源末位）	8
plateColor	FPlateColor	前两格颜色，可传入[blue、yellow、green、white]	blue
width	string	格子宽度	72rpx
height	string	格子高度	80rpx
fontSize	string	格子字号	32rpx
gap	string	格子间距	8rpx

事件

事件名	说明	回调参数
click	点击车牌区域时触发	-

方法

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