fs-uni-template/components/fs-license-plate/fs-license-plate.vue

<template>
	<view>
		<view class="title text-center gutter-v" style="padding: 20rpx;">请输入车牌号</view>
		<view class="fs-plate">
			<view
				class="fs-plate-item"
				:class="{ 'fs-plate-item-active': curIndex === index, 'fs-plate-new': index === 6 && !item }"
				v-for="(item, index) in carNo"
				:key="index"
				@click="handleInput(index)"
			>
				{{ item || '' }}
			</view>
		</view>
		<fs-keyboard mode="car" v-model="visible" :index="curIndex" @change="handleChange"></fs-keyboard>
	</view>
</template>

<script>
/**
 * 车牌组件
 * @description 车牌组件
 * @event {Function} change chagne事件
 */
export default {
	name: 'fs-license-plate'
}
</script>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	modelValue: String
})
const emits = defineEmits(['update:modelValue', 'change'])

const carNo = ref(new Array(7))
if (props.modelValue) {
	for (let i = 0; i < props.modelValue.length; i++) {
		carNo.value[i] = props.modelValue[i]
	}
}
let curIndex = ref(-1)
const handleChange = item => {
	const length = carNo.value.filter(item => item).length

	if (item === 'del') {
		if (length >= 1) {
			curIndex.value--
			carNo.value[curIndex.value] = ''
		}
	} else {
		if (length <= 6) {
			carNo.value[curIndex.value] = item
			curIndex.value++
		}
	}

	emits('update:modelValue', carNo.value.join(''))
	emits('change', carNo.value.join(''))
}

let visible = ref(false)
const handleInput = index => {
	curIndex.value = index
	visible.value = true
}
</script>

<style lang="scss" scoped>
.fs-plate {
	display: flex;
	justify-content: center;
	align-items: center;

	&-item {
		width: 80rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 8rpx;
		border: 1px solid #cbcbcb;
		text-align: center;

		& + & {
			margin-left: 20rpx;
		}

		&-active {
			border-color: var(--primary);
		}
	}
	&-new {
		position: relative;
		&::after {
			content: '新能源';
			color: #999999;
			width: 100%;
			font-size: 10px;
			text-align: center;
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}
</style>