ba_web/src/components/MyComponents/CarNumber/index.vue

<template>
  <div class="zj-carnumber-box form-item-box" :style="{ width: width }">
    <el-select
      :class="{ 'error-input': carProvinceError }"
      class="carnumber-select"
      v-model="editForm.carProvince"
      clearable
      :placeholder="placeholder"
      @change="carProvinceSelect"
      popper-class="carnumber-select"
    >
      <el-option
        v-for="item in allKeyWord.province"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>

    <el-popover placement="bottom" popper-class="alphabet-select-wrap" trigger="click">
      <template #reference>
        <el-input
          :class="{ 'error-input': carAlphabetError }"
          class="carnumber-input"
          style="text-transform:uppercase; "
          :maxlength="maxlength"
          @input="inputNumber"
          onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
          @clear="clearCarAlphabet"
          v-model="editForm.carAlphabet"
          placeholder="请输入车牌号"
        />
      </template>

      <div class="alphabet"   >
        <ul>
          <li
            @click="chooseNumber(item)"
            v-for="item in allKeyWord.alphabet"
            :key="item"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </el-popover>
    <div class="error-tips" v-if="showErrorTips">{{ errorTips }}</div>
    <!-- <el-icon class="errorIcon"><circle-close-filled /></el-icon>
    <el-icon class="checkIcon"><circle-check-filled /></el-icon> -->
  </div>
</template>
<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import { ref, reactive, nextTick } from "vue";
const emits = defineEmits(["handleChange"]); //子组件向父组件事件传递
const props = defineProps({
  //获取组件传值
  carnumber: {
    default: "",
    type: String
  },
  nationOption: {
    default: () => [],
    type: Array
  },
  placeholder: {
    default: "请选择",
    type: String
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  }
});
const maxlength = 7;
const showErrorTips = ref(false);
const carProvinceError = ref(false);
const carAlphabetError = ref(false);
const errorTips = ref("");
const editForm = reactive({
  carProvince: "",
  carAlphabet: ""
});
nextTick(() => {
  if (props.carnumber) {
    editForm.carProvince = props.carnumber.substr(0, 1);
    editForm.carAlphabet = props.carnumber.slice(1);
    numberList.value = editForm.carAlphabet.split("");
  }
});
const carNumber = ref("");
const numberList = ref([]);
const allKeyWord = {
  province: [
    "京",
    "津",
    "沪",
    "渝",
    "川",
    "新",
    "藏",
    "宁",
    "贵",
    "桂",
    "云",
    "黑",
    "吉",
    "辽",
    "晋",
    "翼",
    "青",
    "鲁",
    "豫",
    "苏",
    "皖",
    "浙",
    "闽",
    "赣",
    "湘",
    "鄂",
    "琼",
    "甘",
    "陕",
    "蒙",
    "粤"
    // '港',
    // '澳',
    // '台',
    // '使',
    // '领',
    // '警',
    // '学'
  ],
  alphabet: [
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    0,
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z"
  ]
};
const carProvinceSelect = (data) => {
  carNumber.value = editForm.carProvince + editForm.carAlphabet;
  emits("handleChange", carNumber.value.toUpperCase());
};
const clearCarAlphabet = () => {
  editForm.carAlphabet = "";
  numberList.value = [];
  emits("handleChange", "");
};
const inputNumber = () => {
  carNumber.value = editForm.carProvince + editForm.carAlphabet;
  emits("handleChange", carNumber.value.toUpperCase());
};
const chooseNumber = (e) => {
  numberList.value = editForm.carAlphabet.split(",");
  numberList.value.push(e);
  editForm.carAlphabet = numberList.value.toString().replace(/,/g, "");
  carNumber.value = editForm.carProvince + editForm.carAlphabet;
  emits("handleChange", carNumber.value.toUpperCase());
};
</script>

<style lang="scss" scoped>
.zj-carnumber-box {
  display: flex;
  justify-content: flex-start;
  ::v-deep .carnumber-select {
    width: 88px !important;
    .el-input {
      width: 88px !important;
      min-width: 88px !important;
    }
  }
  .carnumber-input {
    width: 100%;
    ::v-deep .el-input__inner{
      width: 100%;
      text-transform: uppercase ;
    }
  }
}
</style>