51 lines
1.9 KiB
Vue
51 lines
1.9 KiB
Vue
<template>
|
|
<div class="aa-plate">
|
|
<div class="aa-plate-field" :class="{ 'is-focus': focused, 'is-valid': valid, 'is-invalid': invalid }">
|
|
<select class="aa-plate-prov" v-model="prov">
|
|
<option v-for="p in provinces" :key="p" :value="p">{{ p }}</option>
|
|
</select>
|
|
<input
|
|
class="aa-plate-input"
|
|
:value="body"
|
|
maxlength="7"
|
|
placeholder="A12345"
|
|
@input="onInput"
|
|
@focus="focused = true"
|
|
@blur="focused = false"
|
|
/>
|
|
</div>
|
|
<div class="aa-plate-tip" :class="tipClass" v-html="tipText"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: String, default: '' },
|
|
provinces: { type: Array, default: () => ['京', '沪', '粤', '津', '冀', '鲁', '苏', '浙', '川', '渝'] }
|
|
});
|
|
const emit = defineEmits(['update:modelValue']);
|
|
const prov = ref(props.modelValue ? props.modelValue[0] : '京');
|
|
const body = ref(props.modelValue ? props.modelValue.slice(1) : '');
|
|
const focused = ref(false);
|
|
|
|
const valid = computed(() => /^[A-Z][A-Z0-9]{5}$/.test(body.value) || /^[A-Z][A-Z0-9]{6}$/.test(body.value));
|
|
const invalid = computed(() => !!body.value && !valid.value);
|
|
const isNewEnergy = computed(() => /^[A-Z][A-Z0-9]{6}$/.test(body.value));
|
|
const tipClass = computed(() => (!body.value ? '' : valid.value ? 'valid' : 'invalid'));
|
|
const tipText = computed(() => {
|
|
if (!body.value) return '格式：省份 + 字母 + 5/6 位（新能源 6 位）';
|
|
if (valid.value) return '车牌号合法：' + prov.value + body.value + '<span class="aa-plate-tag">' + (isNewEnergy.value ? '新能源' : '普通') + '</span>';
|
|
return '车牌格式不正确（首位应为字母）';
|
|
});
|
|
|
|
function onInput(e) {
|
|
body.value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 7);
|
|
e.target.value = body.value;
|
|
emit('update:modelValue', prov.value + body.value);
|
|
}
|
|
</script>
|
|
|
|
<style src="./PlateInput.css"></style>
|