基于小程序和H5的车牌号输入组件

![preview pic]( \u003Ca href=\

![preview pic]( \u003Ca href=\

![preview pic](https://raw.githubusercontent/stoneNIK/vue-vehicle-plate/master/src/assets/preview.gif)### 根据h5的车号牌号键入部件(VUE)由于新项目中必须,笔写了一个车号牌号键入的部件,作个开发设计手记纪录一下。最先看看车号牌号的标准- 车号牌号标准> 除开现如今的自己挑选个性化车号牌之外,时下应用的九二式机动性车辆牌照,由汉语与英语英文字母的发牌行政机关编码与五位号码构成。
昭通市企业网站建设
例如“苏A-12345”,“苏”意味着江苏省省,A是南京市刑侦大队车子管理方法所发牌编码,意味着此车是由南京市刑侦大队车子管理方法所发牌。后边五十位数是编号。 - [百度搜索百度百科](车号牌号_百度搜索百度百科)- 新能源技术车号牌> 与一般轿车车牌对比,新能源技术轿车车牌号码提升了1位,如原“粤B·D1234”可升位至“粤B·D12345”。升位后,号码编辑更为科学研究有效,防止了与一般轿车车牌“重号”,有益于在车子髙速行车时更准确识别。>> 新能源技术轿车车牌依照不一样车子种类推行按段管理方法,英文字母“D”意味着纯电动车轿车,英文字母“ F”意味着非纯电动车轿车(包含插电式混和驱动力和然料充电电池轿车等)。中小型轿车车牌中“D”或“F”坐落于车牌编号的第一名,大中型轿车车牌中“D”或“F”坐落于车牌编号的最终一名。<br> - [百度搜索百度百科](新能源技术轿车专用型车牌_百度搜索百度百科)想像一下要户实际操作步骤,依据车号牌号的标准,客户的键入全过程是‘省’->‘大城市’->‘编号’->‘新能源技术十位数’(可选择)。客户将会会点一下某一名数开展改动,还可以从后向前删掉,新能源技术又要独立区别开,每一名数的电脑键盘遍布也是不一样的。那么我们界定一个鼠标光标,纪录键入的十位数。依据这一鼠标光标的部位来获得电脑键盘种类,来升级电脑键盘的內容和恶性事件。```javascript/** 标志键入框的十位数 * @param type {number} 电脑键盘种类 * 1:省区键入。电脑键盘:省区通称。 * 2:区号键入。电脑键盘:数据+英文字母。数据和I不能选 * 3:编号挑选。电脑键盘:数据+英文字母。I、O不能选 * 4:独特十位数。电脑键盘:数据+英文字母+独特标识符('字'转换显示信息'学挂警'按键)。I、O不能选 * 5:新能源技术标志位。电脑键盘:数据+英文字母。I、O不能选 */ const InputAreaList = [ { index: 0, type: 1 }, { index: 1, type: 2 }, { index: -1 }, // 切分点,比如:川A·12345 { index: 2, type: 3 }, { index: 3, type: 3 }, { index: 4, type: 3 }, { index: 5, type: 3 }, { index: 6, type: 4 }, { index: 7, type: 5 }];```界定一些变量定义```javascriptconst ProvinceList = "京津沪渝晋蒙吉黑苏浙皖闽赣鲁豫鄂湘粤桂琼川云藏青宁新香港澳门台甘辽冀贵陕".split("");const NumberList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];const LetterList = "QWERTYUIOPASDFGHJKLZXCVBNM".split("");const AdditionKeyList = "学挂警".split(""); // 可选择汉语标识符(倒数第二位)```界定props主要参数```javascriptprops: { initValue: { type: String, default: "" }, limitProvince: { type: String, default: "" }, // 限定省区目录, 无需间距 limitCity: { type: String, default: "" } // 限定大城市目录, 无需间距}```界定鼠标光标```javascriptdata(){ return { activeIndex: -1, // 键入过程,不一样的过程显示信息不一样的电脑键盘合理布局和作用.键入第一名标识符为0,第二位标识符为1 }}```随后便是依据开启恶性事件获得鼠标光标 升级电脑键盘```javascript/** 第一位 省区挑选 仅有省区通称目录可选择 */ if (keyboardType === 1) { this.iptKeyList = ProvinceList.map(e => ({ key: e, disabled: this.checkProvinceDisabled(e) })); } /** 第二位 区号挑选 英语英文字母+数据 数据和I不能选 */ if (keyboardType === 2) { this.iptKeyList = NumberList.concat(LetterList).map(e => ({ key: e, disabled: this.checkCityDisabled(e) })); } /** 第三-6位 编号挑选 英语英文字母+数据 I、O不能选 */ if (keyboardType === 3) { this.iptKeyList = NumberList.concat(LetterList).map(e => ({ key: e, disabled: e === "I" || e === "O" })); } /** 第7位 编号挑选 英语英文字母+数据+独特标识符转换('学挂警') I、O不能选 */ if (keyboardType === 4) { let iptKeyList = NumberList.concat(LetterList); // 第三排最终一字符插进'字',点一下以后弹出来'学挂警'三个可选择标识符按键 iptKeyList.splice(29, 0, "字"); this.iptKeyList = iptKeyList.map(e => ({ key: e, disabled: e === "I" || e === "O" })); this.showAdditionList = false; } /** 第八位 新能源技术车最终一名挑选 英语英文字母+数据 I、O不能选 */ if (keyboardType === 5) { this.iptKeyList = NumberList.concat(LetterList).map(e => ({ key: e, disabled: e === "I" || e === "O" })); }}```依据传到的props和不一样部位,电脑键盘一些按键必须禁止使用。必须留意的便是 第7位是将会会出现独特标识符键入,在写模版时要要独特解决``` html<div v-if="showAdditionList && item.key === '字'" class="addtion-list"> <div v-for="item in additionKeyList" :key="item" @click="handleInput(item)" > {{ item }} </div></div>```后边便是解决删掉按键逻辑性了,每一次升级电脑键盘,都是把删掉按键再加```javascript/** 删掉按键 */handleRemove() { const process = this.activeIndex; let plateNum = this.plateNum; // 假如部位上面有值先删掉 if (plateNum[process] && plateNum[process] !== " ") { plateNum = this.replaceIndexChar(plateNum, process); this.plateNum = plateNum; return; } if (process === 7) { return; } //部位上沒有值,鼠标光标返回上一个键入框,并删掉上一个键入框的值 const index = process - 1 > -1 ? process - 1 : 0; plateNum = this.replaceIndexChar(plateNum, index); this.plateNum = plateNum; this.activeIndex = index;},```删掉时,点一次是删掉当今鼠标光标上的值,点一下一次是删掉上一名,鼠标光标移动到上一名。这儿较为独特,**新能源技术车号牌标记位,必须手动式点一下把鼠标光标移入才可以键入和删掉,且删掉不容易全自动移位**。这一设置是商品要求,市面上上也是有别的互动方法,例如新能源技术能够全自动删掉返回的,能够相匹配改动。最终再补好键入校检和点一下确定回到值了。<br>mouted勾子中校检并调整props的值```javascriptmounted() { let plateNum = this.initValue; // 现阶段只做前俩位校检,假如不符合法,置为空 if (plateNum[0] && this.checkProvinceDisabled(plateNum[0])) { plateNum = ""; } if (plateNum[1] && this.checkCityDisabled(plateNum[1])) { plateNum = plateNum[0]; } plateNum = plateNum.replace(/(·|\s*)/g, "").toUpperCase(); this.plateNum = plateNum; this.activeIndex = !plateNum.length ? 0 : plateNum.length > 7 ? 7 : plateNum.length === 7 ? 6 : plateNum.length;},```键入合理合法车号牌号时段击确定回到父部件相匹配的值```javascriptconfirm() { const plateNum = this.plateNum.replace(/\s*/g, ""); this.$emit("confirm", { plateNum, plateNumFor: plateNum.slice(0, 2) + "·" + plateNum.slice(2), isNewEnergy: plateNum.length === 8, isProvincialCity: plateNum[1] === "A", province: plateNum[0] });},```到此就完毕了,有一些模版编码和款式编码就没贴出来来啦,详细的编码在:<br>vue版: stoneNIK/vue-vehicle-plate<br>微信小程序版:stoneNIK/weapp-radar感觉非常好的小伙子伴给我点个star激励下

  • H5响应式模板在哪可以免费

    H5响应式网站模彻底完全免费完全免费免费下载,响应式网站模板有哪些?越来越越越大的企业朋友或自己渐渐地选择了H5响应式自助式式建设网站系统软件手机软件独立搭建网站,公司企

  • H5网页页面有哪些运用种类

    伴随着互联网技术性持续发展趋势,H5网页页面获得火爆散播,霸屏级的H5在微信朋友圈到处由此可见,店家也把眼光迁移来到这一新起的散播技术性上,看准了手机微信H5的发展趋势趋

  • H5混合开发APP

    H5混和混和开发设计App开发设计设计方案实战演练演习体会课程内容內容_腾讯课堂教学课堂教学 进入课室相关Hybrid+h5混和开发设计混和开发设计设计方案随着着移动的的浪潮的风靡,各

  • h5营销推广制成那样,也就

    现如今,H5营销推广在手机微信界早已是习以为常的事儿,话是那样说,可是敢问大伙儿一句:你做H5营销推广实际效果如何样?不是是觉得十万只损害点?做得不太好是吧?应对客观事

  • 网站建设过程中,我们该

    网站修建全过程中,大家该如何去辨别一个网站或是说企业的优劣呢?下边,河南省猎狐互联网建网站就来告之大家一个比较好的网站必须具备什么特点。 1、专业技能及时。专业技能行