BizLicensePlateInput 车牌号输入

车牌号两段式键盘输入：省份简称格（黄底提示）+ 位号格，点击弹出自研键盘 Popover——省份 31 键、位号字母数字键盘（车牌规范不含 I / O、位号首位仅字母数字置灰）、输入自动跳格、删除回退、新能源 8 位切换（第 8 位绿色扩展位）、clearable 一键清空、外部值自动解析回显。政企 / 园区 / 车队 / 停车业务的车辆信息录入——与 BizIdCardInput、BizBankCardInput 等强校验输入同一体系。

基础用法

点击省份格选择简称 → 自动跳到位号键盘（不含 I / O，首位仅字母）

省份选择后自动跳位号键盘；输满触发 complete。

<script setup lang="ts">
/** 场景：车辆入场登记——基础车牌输入，complete 输满自动提交提示 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizLicensePlateInput } from 'vue3-ep-biz-lib'

const plate = ref('')

const onComplete = (value: string): void => {
  ElMessage.success(`车牌录入完成：${value}`)
}
</script>

<template>
  <div style="max-width: 560px">
    <BizLicensePlateInput v-model="plate" @complete="onComplete" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      点击省份格选择简称 → 自动跳到位号键盘（不含 I / O，首位仅字母）
    </p>
  </div>
</template>

显示代码

新能源 8 位

普通车牌（7 位）新能源（8 位）

当前值：（未输入）（切换时已输入位号自动保留）

energy 切换 7 / 8 位形态（第 8 位绿色扩展位），已输入位号自动保留。

<script setup lang="ts">
/** 场景：新能源车——energy 8 位切换（第 8 位绿色扩展位） */
import { ref } from 'vue'
import { ElRadioButton, ElRadioGroup } from 'element-plus'
import { BizLicensePlateInput } from 'vue3-ep-biz-lib'

const energy = ref(false)
const plate = ref('')
</script>

<template>
  <div style="max-width: 560px">
    <ElRadioGroup v-model="energy" style="margin-bottom: 12px">
      <ElRadioButton :value="false">普通车牌（7 位）</ElRadioButton>
      <ElRadioButton :value="true">新能源（8 位）</ElRadioButton>
    </ElRadioGroup>
    <BizLicensePlateInput v-model="plate" :energy="energy" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      当前值：{{ plate || '（未输入）' }}（切换时已输入位号自动保留）
    </p>
  </div>
</template>

显示代码

表单校验

车牌号

el-form 自定义规则：必填 + 车牌正则（兼容普通 / 新能源位数）。

<script setup lang="ts">
/** 场景：表单集成——el-form 自定义校验（必填 + 格式正则） */
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElButton, ElForm, ElFormItem, ElMessage } from 'element-plus'
import { BizLicensePlateInput } from 'vue3-ep-biz-lib'

const formRef = ref<FormInstance>()
const form = reactive({ plate: '粤B', remark: '' })

/** 车牌正则：普通 7 位 / 新能源 8 位 */
const PLATE_RE = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/

const rules: FormRules = {
  plate: [
    { required: true, message: '请录入车牌号', trigger: 'change' },
    {
      validator: (_rule, value: string, callback: (error?: Error) => void) => {
        if (value.length < 7) callback(new Error('车牌未录入完整'))
        else if (!PLATE_RE.test(value)) callback(new Error('车牌格式不正确'))
        else callback()
      },
      trigger: 'change',
    },
  ],
}

const submit = (): void => {
  formRef.value?.validate((valid) => {
    if (valid) ElMessage.success(`登记成功：${form.plate}`)
  })
}
</script>

<template>
  <div style="max-width: 560px">
    <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px">
      <ElFormItem label="车牌号" prop="plate">
        <BizLicensePlateInput v-model="form.plate" />
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" @click="submit">提交登记</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

显示代码

回显与禁用

禁用

只读

外部值自动解析：省份格 + 位号格分别回显

外部值注入自动解析（省份格 + 位号格分别回显）、整体禁用、只读态。

<script setup lang="ts">
/** 场景：回显与禁用——外部值注入回显、整体禁用、只读态 */
import { ref } from 'vue'
import { ElSwitch } from 'element-plus'
import { BizLicensePlateInput } from 'vue3-ep-biz-lib'

const plate = ref('粤B8D629')
const disabled = ref(false)
const readonly = ref(false)
</script>

<template>
  <div style="max-width: 560px">
    <div style="margin-bottom: 12px; display: flex; align-items: center; gap: 16px">
      <span style="font-size: 13px">禁用</span>
      <ElSwitch v-model="disabled" />
      <span style="font-size: 13px">只读</span>
      <ElSwitch v-model="readonly" />
    </div>
    <BizLicensePlateInput v-model="plate" :disabled="disabled" :readonly="readonly" />
    <p style="margin-top: 10px; font-size: 13px; color: #909399">
      外部值自动解析：省份格 + 位号格分别回显
    </p>
  </div>
</template>

显示代码

联动查询

complete 后联动查询车辆信息；expose focus（打开省份键盘）/ clear。

<script setup lang="ts">
/** 场景：月卡办理——complete 后联动查询车辆信息，change 实时同步 */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizLicensePlateInput } from 'vue3-ep-biz-lib'
import type { BizLicensePlateInputInstance } from 'vue3-ep-biz-lib'

const plate = ref('')
const info = ref('')
const inputRef = ref<BizLicensePlateInputInstance>()

const onComplete = (value: string): void => {
  /* 模拟按车牌查询车辆信息 */
  setTimeout(() => {
    info.value = `${value} · 蓝牌 · 本场剩余车位 128`
  }, 300)
}

const reset = (): void => {
  plate.value = ''
  info.value = ''
  ElMessage.info('已清空（expose clear）')
}
</script>

<template>
  <div style="max-width: 560px">
    <BizLicensePlateInput
      ref="inputRef"
      v-model="plate"
      clearable
      @complete="onComplete"
    />
    <p v-if="info" style="margin-top: 10px; font-size: 13px; color: #67c23a">{{ info }}</p>
    <div style="margin-top: 10px; display: flex; gap: 8px">
      <ElButton size="small" @click="inputRef?.focus()">聚焦（打开省份键盘）</ElButton>
      <ElButton size="small" @click="reset">清空</ElButton>
    </div>
  </div>
</template>

显示代码

批量录入

车辆 1

车辆 2

车辆 3

多车辆连续录入场景，v-model 独立绑定。

<script setup lang="ts">
/** 场景：批量录入——多车辆连续录入，complete 自动聚焦下一行 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizLicensePlateInput } from 'vue3-ep-biz-lib'

const rows = ref([
  { id: 1, plate: '' },
  { id: 2, plate: '' },
  { id: 3, plate: '' },
])

const addRow = (): void => {
  rows.value.push({ id: rows.value.length + 1, plate: '' })
}
</script>

<template>
  <div style="max-width: 560px">
    <div style="display: flex; flex-direction: column; gap: 12px">
      <div v-for="row in rows" :key="row.id" style="display: flex; align-items: center; gap: 10px">
        <span style="font-size: 13px; color: #909399; width: 48px">车辆 {{ row.id }}</span>
        <BizLicensePlateInput v-model="row.plate" />
      </div>
    </div>
    <ElButton size="small" style="margin-top: 12px" @click="addRow">+ 添加车辆</ElButton>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string	''	车牌值（如 粤B12345 / 粤BD12345 新能源）
energy	boolean	false	新能源 8 位（位号多一位扩展位）
clearable	boolean	true	一键清空按钮
disabled	boolean	false	整体禁用
readonly	boolean	false	只读（回显不弹键盘）

Events

事件名	参数	说明
update:model-value	(value: string)	车牌值变化（v-model）
change	(value: string)	车牌值变化（同 update，业务监听用）
complete	(value: string)	输满（省份 + 全部位号）时触发

Expose

名称	类型	说明
focus	() => void	打开省份键盘
blur	() => void	关闭键盘
clear	() => void	清空并关闭键盘

TIP

键盘规范：省份不含港澳台（如需可扩展）；位号键盘无 I / O（交管规范），首位仅字母。点击组件外区域自动收起键盘。