WEB-新能源车牌输入键盘 ( jQuery版 & VUE 版)

原创

已于 2022-07-26 14:19:50 修改 · 2.8k 阅读

标签

#jquery #css #javascript #bootstrap #sass

于 2021-01-07 16:11:15 首次发布

效果：

在这里插入图片描述

思路：

1.初始化页面渲染车牌号显示框,点击框框时弹起键盘;
2.第一个框框为省份输入键盘,选择省份后动态添加一个类名class haspro,其他框框点击在有haspro时弹起数字键盘,否则始终弹起省份键盘;
3,功能性的确定后退清除以及关闭按钮;
4.特殊验证车牌第二位必须为字母,车牌号正则验证等;
5.有效点击时给对应的框框添加类名 active,通过这个class,结合强大的jquery过滤器选择器,可以实现诸如光标闪动效果,后退清空等等功能性方法;
6.layer 交互提示

VUE 版本 demo

keyBoard.vue 封装键盘

<template>
  <transition name="el-zoom-in-bottom" appear>
    <div
      class="absolute bottom-0 p-6 pt-0 keyboard-dialog"
      v-show="show"
      @click.stop="
        'javascript:void()';


      "
    >
      <ul
        class="flex flex-row flex-wrap justify-between p-0 mb-0 text-black list-none"
      >
        <li
          v-for="(item, index) in activeList"
          :key="index"
          :class="[
            'mt-3 leading-10 text-center bg-white cursor-pointer h-11',
            index >= 31 ? 'fix-margin' : '',
            activeIndex == 1 && index < 10
              ? 'opacity-50 cursor-not-allowed'
              : ''
          ]"
          :style="{ width: '9.1%' }"
          @click="
            activeIndex == 1 && index < 10
              ? 'javascript:void(0)'
              : handleInput(item)
          "
        >
          {
  
  { item }}
        </li>
        <li
          class="mt-3 leading-10 text-center cursor-pointer h-11 del "
          style="width:19.2%;"
          @click="handleDel"
        ></li>

        <li
          class="mt-3 leading-10 text-center text-white cursor-pointer h-11 bg-blue-dark"
          style="width:19.2%;margin-left:1%;"
          @click="handleConfirm"
        >
          完成
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
export default {
  name: "Keyboard",
  props: {
    activeIndex: {
      type: Number,
      default: -1
    }
  },
  data: () => ({
    show: false,
    province: new Array(
      "京",
      "沪",
      "浙",
      "苏",
      "粤",
      "鲁",
      "晋",
      "冀",
      "豫",
      "川",
      "渝"