用vue封装一个h5的车牌号输入框

车牌号输入框是一个常见的H5组件，下面是一个基于Vue的车牌号输入框的示例代码：

<template>
  <div class="license-plate">
    <input type="text" class="province" v-model="province" maxlength="1" @input="onProvinceInput" />
    <input type="text" class="city" v-model="city" maxlength="1" @input="onCityInput" />
    <input type="text" class="number" v-model="number" maxlength="5" @input="onNumberInput" />
  </div>
</template>

<script>
export default {
  name: 'LicensePlate',
  data() {
    return {
      province: '',
      city: '',
      number: '',
    };
  },
  methods: {
    onProvinceInput() {
      if (this.province.length === 1) {
        this.$refs.city.focus();
      }
    },
    onCityInput() {
      if (this.city.length === 1) {
        this.$refs.number.focus();
      }
    },
    onNumberInput() {
      if (this.number.length === 5) {
        this.$emit('input', this.province + this.city + this.number);
      }
    },
  },
};
</script>

<style scoped>
.license-plate {
  display: flex;
  align-items: center;
}

.province,
.city,
.number {
  width: 20px;
  height: 30px;
  margin-right: 5px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 16px;
  outline: none;
}
</style>

该组件包含三个输入框，分别对应省份、城市和车牌号码。在输入框的输入事件中，通过判断输入框的值长度，实现自动跳转到下一个输入框。当车牌号码输入完毕时，通过`$emit`方法向父组件传递车牌号码的值。该组件还包含简单的样式，可以根据需求进行修改。