# VehicleNumberInput 车牌输入框

<template>
  <code-box>
    <el-row :gutter="8">
      <el-col :span="12">
        <el-form :model="ruleForm" :rules="rules">
            <el-form-item
              prop="num"
            >
              <h-vehicle-number-input
                tips="*号替代多个或零个字符，?号替代一个字符"
                v-model="ruleForm.num"
                :disabled="openRule"
              />
            </el-form-item>
        </el-form>
        <el-button @click="openRule = !openRule">切换可用行</el-button>
      </el-col>
    </el-row>
  <code-box>
</template>

<script>
export default {
  data() {
    return {
      openRule: false,
      ruleForm: {
        num: '浙A59191'
      },
      rules: {
        num: [
          {
            validator(rule, value, callback) {
              let regStr =
                '^[0-9a-zA-Z京沪粤浙苏鲁陕晋冀豫川渝辽吉皖鄂湘赣闽甘宁蒙津贵云桂琼青新藏黑学挂领使港澳警\\*\\?]{0,8}$';
              let reg = new RegExp(regStr);
              if (!reg.test(value)) {
                callback(new Error('请正确输入号牌号码'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ]
      }
    };
  }
};
</script>

<template>
  <el-row :gutter="8">
    <el-col :span="12">
      <h-vehicle-number-input
        :area="['京','沪','粤','浙','苏']"
        :letter="['A','B','C','D']"
        :special="['使', '学']"
      />
    </el-col>
  </el-row>
</template>