vue 车牌号键盘

最新推荐文章于 2024-06-18 16:44:38 发布
最新推荐文章于 2024-06-18 16:44:38 发布
阅读量2.1k 收藏 5
点赞数 1
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42269163/article/details/124824962
版权

结合vant框架 

效果图

 

组件页面

<template>
  <div class="keyboard">
    <div class="keytitle">
      请点击选择车牌号
      <span>(绿色虚线为新能源)</span>
    </div>
    <div class="input-box" @click="clickShowKeyboard">
      <li>{{ first }}</li>
      <li>{{ numArr[0] }}</li>
      <li>{{ numArr[1] }}</li>
      <li>{{ numArr[2] }}</li>
      <li>{{ numArr[3] }}</li>
      <li>{{ numArr[4] }}</li>
      <li>{{ numArr[5] }}</li>
      <li>{{ numArr[6] }}</li>
    </div>

    <div class="keyqr" @click="close">
      确定
    </div>

    <!-- 选择车牌号 首个汉字键盘 弹出层 -->
    <div class="plate_number">
      <van-popup
        v-model="show_chinese"
        position="bottom"
        :overlay="true"
        overlay-class="displayNone"
      >
        <div class="plate_chinese_box">
          <!-- 点击对应的汉字，进行输入 -->
          <van-button
            size="small"
            v-for="(item, index) in ChineseList"
            :key="item.id"
            @click="checkChinese(index)"
            >{{ item.name }}</van-button
          >
          <div class="close-box" @click.stop="close_keyboard">
            <div>╳</div>
            <li></li>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 英文 数字 键盘 -->
    <div class="allBoard">
      <van-popup
        v-model="show_allBoard"
        position="bottom"
        :overlay="true"
        overlay-class="displayNone"
      >
        <div class="plate_number_box">
          <!-- 点击对应的字母或数字，进行输入 -->
          <van-button
            size="small"
            v-for="(item, index) in English_Number"
            :key="item.id"
            @click="checkEnglish_num(index)"
            >{{ item.name }}</van-button
          >
          <div class="close-box" @click.stop="close_keyboard">
            <div>╳</div>
            <li></li>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  props: ["showShare"],
  watch: {
    showShare() {
      console.log("组件页", this.showShare);
      this.show_chinese = this.showShare;
    }
  },
  data() {
    return {
      showKeyboard: true, //车牌号输入框是否聚焦
      show_chinese: false, //是否显示汉字键盘
      show_allBoard: false, //是否显示英文数字键盘
      ChineseList: [
        { name: "京", id: 1 },
        { name: "津", id: 2 },
        { name: "冀", id: 3 },
        { name: "晋", id: 4 },
        { name: "蒙", id: 5 },
        { name: "辽", id: 6 },
        { name: "吉", id: 7 },
        { name: "黑", id: 8 },
        { name: "沪", id: 9 },
        { name: "苏", id: 10 },
        { name: "浙", id: 11 },
        { name: "皖", id: 12 },
        { name: "闽", id: 13 },
        { name: "赣", id: 14 },
        { name: "鲁", id: 15 },
        { name: "豫", id: 16 },
        { name: "鄂", id: 17 },
        { name: "湘", id: 18 },
        { name: "粤", id: 19 },
        { name: "桂", id: 20 },
        { name: "琼", id: 21 },
        { name: "渝", id: 22 },
        { name: "川", id: 23 },
        { name: "贵", id: 24 },
        { name: "云", id: 25 },
        { name: "藏", id: 26 },
        { name: "陕", id: 27 },
        { name: "甘", id: 28 },
        { name: "青", id: 29 },
        { name: "宁", id: 30 },
        { name: "新", id: 31 },
        { name: "←", id: 99 }
      ],
      English_Number: [
        { name: "1", id: 28 },
        { name: "2", id: 29 },
        { name: "3", id: 30 },
        { name: "4", id: 31 },
        { name: "5", id: 32 },
        { name: "6", id: 33 },
        { name: "7", id: 34 },
        { name: "8", id: 35 },
        { name: "9", id: 36 },
        { name: "0", id: 37 },
        { name: "Q", id: 38 },
        { name: "W", id: 39 },
        { name: "E", id: 40 },
        { name: "R", id: 41 },
        { name: "T", id: 42 },
        { name: "Y", id: 43 },
        { name: "U", id: 44 },
        { name: "I", id: 45 },
        { name: "O", id: 46 },
        { name: "P", id: 47 },
        { name: "A", id: 48 },
        { name: "S", id: 49 },
        { name: "D", id: 50 },
        { name: "F", id: 51 },
        { name: "G", id: 52 },
        { name: "H", id: 53 },
        { name: "J", id: 54 },
        { name: "K", id: 55 },
        { name: "L", id: 56 },
        { name: "Z", id: 57 },
        { name: "X", id: 58 },
        { name: "C", id: 59 },
        { name: "V", id: 60 },
        { name: "B", id: 61 },
        { name: "N", id: 62 },
        { name: "M", id: 63 },
        { name: "←", id: 99 }
      ],
      plate_number: "", //车牌号
      first: "",
      numArr: []
    };
  },
  methods: {
    // 唤起键盘
    clickShowKeyboard() {
      if (!this.first) {
        this.show_chinese = true;
      } else {
        this.show_chinese = false;
        this.show_allBoard = true;
      }
    },
    // 选择车牌号前面的汉字
    checkChinese(index) {
      // 如果点击删除键，删除第一个格的内容
      if (this.ChineseList[index].id == 99) {
        this.first = "";
      } else {
        // 把选中的字赋值给第一个格，并且切换键盘
        this.first = this.ChineseList[index].name;
        this.show_chinese = false;
        this.show_allBoard = true;
      }
      this.hao = this.first + this.numArr.join("");
      this.$emit("sendmsg", this.hao);
      // console.log("ddddddddd", this.hao);
    },
    // 选择车牌号后面的数字和字母
    checkEnglish_num(index) {
      // 如果点击删除键，删除 numArr 的最后一个值
      if (this.English_Number[index].id == 99) {
        this.numArr.pop();
        // 如果 numArr 里面被删的没有值了，切换键盘
        if (this.numArr.length == 0) {
          this.show_chinese = true;
          this.show_allBoard = false;
        }
      } else {
        // 把选中的值 push 到 numArr 内
        this.numArr.push(this.English_Number[index].name);
        // 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个
        if (this.numArr.length > 7) {
          this.numArr.pop();
        }
      }
      // 把牌照拼接起来赋值到info
      this.hao = this.first + this.numArr.join("");
      // console.log("ddddddddd", this.hao);
      this.$emit("sendmsg", this.hao);
    },
    // 关闭虚拟键盘
    close_keyboard() {
      this.show_chinese = false;
      this.show_allBoard = false;
      this.$emit("jiantingClose", "（组件）我被执行了");
    },
    close() {
      this.show_chinese = false;
      this.show_allBoard = false;
      this.$emit("qbClose", "（组件）我被执行了");
    }
  }
};
</script>

<style scoped lang="scss">
.keytitle {
  text-align: center;
  font-size: 1.4rem;
  color: black;
  margin-bottom: 1.4rem;
  span {
    display: block;
    color: #35b784;
    font-size: 1rem;
    margin-top: 0.5rem;
  }
}
.keyqr {
  text-align: center;
  font-size: 1.4rem;
  margin-top: 1.4rem;
  background: #3f51b5;
  width: 80%;
  margin: 0 auto;
  border-radius: 6px;
  color: #fff;
  padding: 0.5rem 0;
}
.keyboard {
  width: 100%;
  // position: absolute;
  z-index: 999;
  margin-top: 9rem;
}
// 车牌号 & 虚拟键盘
.input-box {
  width: 21rem;
  height: 3.2rem;
  margin: auto;
  background: #fff;
  box-shadow: 0px 6px 8px 0px rgba(96, 100, 112, 0.1);
  border-radius: 0.4rem;
  // border-bottom: 1px solid rgba(206, 208, 210, 1);
  border: 1px solid #ced0d2;
  margin: 0 auto 2rem;
  display: flex;
  justify-content: center;
  li {
    flex: 1;
    border-right: 1px solid rgba(206, 208, 210, 1);
    box-sizing: border-box;
    margin-left: -1px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111f85;
    &:nth-child(7) {
      border: none;
    }
  }
  li:last-child {
    border: 2px dotted #35b784;
  }
}

.class-close-box {
  width: 2rem;
  height: 1.5rem;
  position: absolute;
  right: 0.5rem;
  top: -3.3rem;
}
.class-close-box-div {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  line-height: 2rem;
  margin: auto;
  text-align: center;
  border: 1px solid #666;
  border-radius: 50%;
}
.class-close-box-li {
  width: 1px;
  height: 1rem;
  background: #666;
  margin: auto;
}
.overflow-y {
  overflow-y: inherit;
}
.class-van-button-small {
  min-width: 0;
  border-radius: 5px;
  margin: 5px 2px;
  box-shadow: 5px 5px 5px #aaa;
}
.class-plate-box {
  width: 100%;
  padding: 0.7rem 0.5rem;
  box-sizing: border-box;
  background: #eaf1f9;
  position: relative;
}
.plate_number {
  .van-popup {
    @extend .overflow-y;
  }
  .van-popup--bottom {
    background: #eee;
  }
  .plate_chinese_box {
    width: 100%;
    @extend .class-plate-box;
    .close-box {
      @extend .class-close-box;
      div {
        @extend .class-close-box-div;
      }
      li {
        @extend .class-close-box-li;
      }
    }
    .van-button--small {
      width: 11.3%;
      height: 3.5rem;
      font-size: 1.1rem;
      @extend .class-van-button-small;
    }
  }
}
.allBoard {
  .van-popup {
    @extend .overflow-y;
  }
  .plate_number_box {
    width: 100%;
    @extend .class-plate-box;
    .close-box {
      @extend .class-close-box;
      div {
        @extend .class-close-box-div;
      }
      li {
        @extend .class-close-box-li;
      }
    }
    .van-button--small {
      width: 8.8%;
      height: 3rem;
      font-size: 1.1rem;
      @extend .class-van-button-small;
    }
    .van-button--small:nth-child(1) {
      margin-bottom: 5px;
    }
    .van-button--small:nth-child(21) {
      margin-left: 5%;
    }
    .van-button--small:nth-child(30) {
      margin-left: 10%;
    }
    .van-button--small:last-child {
      width: 13%;
    }
  }
}
</style>
<style lang="scss">
.displayNone {
  display: none !important;
}
</style>

页面调用

<template>
  <div>
   

    <div class="bangding addcar">
      <van-form @submit="onSubmit">
        <van-field
          v-model="licensePlateNumber"
          name="licensePlateNumber"
          label="车牌号"
          placeholder="请填写车牌号"
          @input="vinInput"
          @click="showSharefn"
          readonly
          :rules="[{ validator, message: '请选择正确的车牌号' }]"
        >
        </van-field>

        <van-field name="switchChecked" label="默认" class="mr">
          <template #input>
            <van-switch
              :active-value="1"
              :inactive-value="0"
              v-model="switchChecked"
              size="20"
            />
          </template>
        </van-field>

        <div class="tj">
          <van-button round block type="info" native-type="submit"
            >确定</van-button
          >
        </div>
      </van-form>
    </div>


    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <v-jianpan
        @sendmsg="getmsg"
        :showShare="showShare"
        @jiantingClose="zhixinClose"
        @qbClose="gbtc"
      ></v-jianpan>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import API from "@/api/api.js";
import jianpan from "@/components/jianpan.vue";
export default {
  data() {
    return {
      show: false,
      licensePlateNumber: "",
      switchChecked: "0",
      showShare: false
    };
  },
  created() {},
  components: {
    "v-jianpan": jianpan
  },
  methods: {
    gbtc() {
      this.showShare = false;
      this.show = false;
    },
    getmsg(val) {
      // console.log("666666", val);
      this.licensePlateNumber = val;
    },
    showSharefn() {
      // this.showShare = true;
      this.show = true;
      // console.log("aaaaaaaaaaaaa");
    },
    zhixinClose(e) {
      // console.log(e, "aaaaaaaaaaaaa");
      this.showShare = false;
    },

    validator(val) {
      const plateNumber = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/;
      return plateNumber.test(val);
    },
    

    onSubmit(val) {
     
    },

    

   
  }
};
</script>

小王同学
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue3 封装 el-table 支持嵌套 + render + json 配置
weixin_44180190的博客
08-30 1289
vue3 封装 el-table js 版本代码 支持 嵌套标签 支持 json 配置 支持 render函数
vue车牌号输入键盘.zip
08-13
在这个项目中，“vue车牌号输入键盘.zip” 提供了一个专门设计的Vue组件，用于在Web应用中实现车牌号的输入功能，特别适合汽车相关的应用场景。这个组件考虑到了新能源汽车的车牌格式，确保了灵活性和兼容性。 首先...
自定义车牌键盘(vue版)
09-01
自己写的一款车牌键盘,主要针对手机端,若想用于pc端自己修改下样式 体验地址:http://tool.heimaozy.com/T/carKeyword
vue 车牌号输入专用键盘
04-19
vue 车牌号输入专用键盘， 提供输入框自定义插槽、只读等功能
vue element-ui 车牌号选择组件
最新发布
askuld的博客
06-18 414
【代码】vue element-ui 车牌号选择组件。
宝藏级UI组件库：FirstUI，微信小程序版+uniapp版更新至1.6.0，完美支持vue3
lonlie的博客
07-04 4278
宝藏级UI组件库：FirstUI，微信小程序版+uniapp版更新至1.6.0，完美支持vue3，顶尖的组件库、强大的功能库、丰富精美的模板库
Vue H5 前端自定义车牌号输入键盘(支持新能源)
Hubery96的博客
08-12 2449
这个项目是基于 vue2+vant 写的录入车牌的键盘, 有需要的伙伴可以参考一下;
微信小程序车牌组件代码
11-25
在小程序中做过一个需求——申请开通ETC。为实现该需求封装了一个小程序的组件。将该资源上传给有需要的人。也可用于停车场收费等场景
vant vue单张图片上传
不靠谱的作曲家
11-19 795
上传组件 <template #input> <van-uploader accept="file" :max-count="1" v-model="photo" :after-read="afterPhoto" /> </template> data data() { return { photo: [], } }, 事件绑定，组装成file文件 afterPhoto(file) { const tempFile = file.file
手机端车牌号码键盘的vue组件
deng_zhihao692817的专栏
07-01 1641
源码在https://github.com/Pinenutss/LicensePlate
Vue二次封装input的几种方法
FSy321321的博客
11-29 3025
在看如何封装之前，先来了解一下v-model是怎么回事。 其实说白了，v-model就是change和value的结合体。 废话不多说，下面就来看一下在vue中如何封装自定义的input组件。 #封装原生input： <template> <input type="text" :value="value" @input="handleChange" /> </template> <script> export default { name: .
layui实现车牌号输入框
06-06
本篇文章将详细讲解如何利用layui实现车牌号输入框，并特别关注对新能源车牌的支持。 首先，layui是一个轻量级、模块化的前端框架，它提供了丰富的UI组件，如表格、表单、按钮、弹窗等，使得开发者可以快速搭建界面...
uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un
10-04
考虑到车牌号的特殊性，它可能包含汉字、字母和数字，因此，需要一个专门的键盘来展示这些字符，而不是普通的数字或字母键盘。描述中的“弹出键盘点选”就是指这种定制的键盘，它会在用户点击输入框时弹出，显示符合...
uni-app车牌输入组件(含新能源/普通车牌) 即插即用,多端适配
08-28
适配uni-app的车牌号输入plate-input组件 兼容 H5及微信小程序 引入插件的vue文件并绑定触发事件 默认使用Less样式,也可以在 uni-plate-input.vue文件 中的style标签里将引入样式更换成css或其他自定义样式 参数: ...
车牌号码专用键盘基于vuejs
08-10
在车牌号码专用键盘的项目中，我们可以看到Vue.js是如何被用来构建一个特定用途的UI输入工具。这个项目的核心目标是为用户提供一个专用于输入车牌号码的键盘界面，提高用户在输入车牌号码时的效率和准确性。 在Vue....
微信小程序-虚拟车牌输入键盘组件vehicleKeyboard-master.zip
09-25
4. 自定义逻辑：由于车牌号可能存在特定的规则（如省份缩写、序列号限制等），组件可能需要包含一些自定义逻辑，以验证用户输入的合法性，或者根据输入自动填充部分内容。 5. 安装与引用：在小程序项目中使用该组件...
vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）
m0_52685922的博客
06-28 3808
支持点击输入框删除或输入车牌，可直接在uniapp项目中运行，将view标签换为div、并且将rpx单位换成px可在vue项目里运行。
vant+vue在静态页面实现车牌号软键盘
lemon今天学习了吗？的博客
09-29 3442
1.因为是在html静态页面中使用，所以要先引入vant.css、vant.js、vue.js到需要使用的html页面；2.将实现好的车牌软键盘功能放到一个js里面，再将该组件使用js方式引入到html界面，同样该组件的css代码也要引入；2. 当在多个静态页面需要使用该组件时，如何封装成组件？1、如何将选中的车牌号回显在需要显示的表单中？
vue车牌号码输入键盘，简单易懂
weixin_43147445的博客
07-05 2170
网上找了好多，都没找到合适的vue版车牌号输入键盘，就自己写了一个。 <template> <div class="car-number"> <div class="pop"> <div class="title"> <span v-for="(item,index) in textList" :key="index">{{item}}</span> <i @clic
vue 车牌号输入键盘 网页版
12-19
Vue车牌号输入键盘网页版是一个基于Vue.js框架开发的网页应用程序，用于在网页上输入和管理车牌号信息。通过Vue.js的双向数据绑定和组件化开发，实现了用户友好的界面和良好的交互体验。 在该网页版应用程序中，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值