uniapp车牌号组件

前言

uniapp写的小程序需要车牌输入功能，不管是uniapp本身提供的组件还是第三方组件都没有提供车牌输入的组件功能。百度找了一下资料，发现车牌输出键盘组件都是自定义组件，也就是说得自己写。找了一圈一个能用的都没有，都不符合预期。不过也找到一个能用的，起码拿来改改还能用。

参考地址：https://www.jianshu.com/p/1e392e0705c4

它这个是针对移动端的vue车牌号输入组件，单位用的是rem，但是我要的是uniapp小程序输入组件。直接放到小程序中会出现样式问题。不过只要改一下单位就行，改完之后效果如下：

总结了一下，一共两个vue文件即可，一个是组件keyword.vue，放到compenents组件目录即可，另一个是carlicense.vue，负责调用组件。废话不多说，直接上代码。

目录结构：

keyword.vue文件

<template lang=""><div><div class='panel-wrap'  v-if="isShow" data-value="exit"  @click='colse_da'><div class="vehicle-panel" :style="{background:backgroundColor}"><!-- height:'500rpx'; --><div class='topItem'><span class='check'  @click='check'>中/英</span><span class='contentShow'>{{oinp}}</span><span class='exit' @click='vehicleTap("exit")'>取消</span></div><!--省份简写键盘--><div v-if="keyBoardType === 1"><div class="vehicle-panel-row"><div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle1" @click='vehicleTap(item)' :key="item">{{item}}</div></div><div class="vehicle-panel-row"><div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle2" @click='vehicleTap(item)'  :key="item">{{item}}</div></div><div class="vehicle-panel-row"><div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle3" @click='vehicleTap(item)'  :key="item">{{item}}</div><div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'><img src='../static/images/door.png' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'></div></div><div class="vehicle-panel-row-last"><div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)'  v-for="(item,idx) in keyVehicle4" :style="{border:buttonBorder}":key="item">{{item}}</div></div></div><!--英文键盘  --><div v-else><div class="vehicle-panel-row"><div    class='vehicle-panel-row-button vehicle-panel-row-button-number' @click='vehicleTap(item)'  v-for="(item,idx) in keyNumber" :style="{border:buttonBorder}":key="item">{{item}}</div></div><div class="vehicle-panel-row"><div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyEnInput1" @click='vehicleTap(item)'   :key="item">{{item}}</div></div><div class="vehicle-panel-row"><div    class='vehicle-panel-row-button' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput2" @click='vehicleTap(item)'   :key="item">{{item}}</div><div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'><img src='../static/images/door.png' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'></div></div><div class="vehicle-panel-row-last"><div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput3":key="item">{{item}}</div><div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-ok' @click='vehicleTap("ok")' >确定</div></div></div>
</div>
</div></div>
</template>
<script>export default {name:'keyword',props:{isShow: false,oinp: ""},data() {return {fontsize:20,keyVehicle1: ["陕", "京", "津", "沪", "冀", "豫", "云", "辽"],keyVehicle2: ["黑", "湘", "皖", "鲁", "新", "苏", "浙", "赣"],keyVehicle3: ["鄂", "桂", "甘", "晋", "蒙", "吉", "闽"],keyVehicle4: ["粤", "川", "青", "藏", "琼", "宁", "贵", "渝"],keyNumber: "1234567890",keyEnInput1: "QWERTYUIOP",keyEnInput2: "ASDFGHJKL",keyEnInput3: "ZXCVBNM",backgroundColor: "#fff",keyBoardType: 1,buttonBorder: "1px solid #ccc"};},methods: {vehicleTap: function(event) {console.log(event);switch (event) {case "delete":this.$emit("delete");this.$emit("inputchange",event);break;case "ok":this.$emit("ok",this.oinp);break;case "exit":this.$emit("exit");break;default:this.$emit("inputchange", event);}},colse_da() {this.$emit("exit2");},check() {if (this.keyBoardType == 1) {this.keyBoardType = 2;} else if (this.keyBoardType == 2) {this.keyBoardType = 1;}}}};
</script>
<style>:host {width: 100%;}.panel-wrap {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);z-index: 999;}.vehicle-panel {width: 100%;position: fixed;bottom: 0;display: flex;flex-direction: column;justify-content: center;z-index: 1000;background: #fff;padding-bottom: 68rpx;}.jik {width: 60rpx;height: 80rpx;}.vehicle-panel-row {display: flex;justify-content: space-between;align-items: center;}.vehicle-panel-row-last {display: flex;justify-content: space-between;align-items: center;}.vehicle-panel-row-button {background-color: #fff;margin: 5rpx;// padding: 5rpx;width: 80rpx;height: 80rpx;text-align: center;line-height: 80rpx;border-radius: 10rpx;}.vehicle-panel-row-button-number {background-color: #eee;}.vehicle-panel-row-button-last {width: 90rpx;height: 90rpx;line-height: 90rpx;}.vehicle-hover {background-color: #ccc;}.vehicle-panel-row-button-img {display: flex;justify-content: center;align-items: center;}.vehicle-en-button-delete {width: 55rpx;height: 85rpx;}.vehicle-panel-ok {background-color: #6a7cff;color: #fff;width: 150rpx;height: 80rpx;line-height: 80rpx;}.topItem {display: flex;justify-content: space-between;align-items: center;height: 100rpx;/* background: #f0f0f0; */}.exit {margin-right: 30rpx;color: #6a7cff;font-size: 28rpx;display: block;line-height: 50rpx;}.check {margin-left: 30rpx;color: #6a7cff;font-size: 28rpx;display: block;line-height: 50rpx;}
</style>

carlicense.vue文件

<template><div><button @click="keyState = true">键盘</button><keyword :isShow="keyState" @exit="exit" @inputchange="getKey" :oinp="str" @ok="confirm"/></div>
</template>
<script>import keyword from '@/components/keyword.vue'export default {data(){return {keyState:false,str:""}},components:{keyword},methods:{exit(){this.keyState = false},getKey(val){if (this.str.length >= 8&&val!="delete") {return false}if(val == 'delete'){this.str = this.str.slice(0, this.str.length-1)}else{this.str+=val} },confirm(e){console.log(e);this.keyState = false},}}
</script>

uniapp车牌号组件相关推荐

微信小程序车牌号组件，车牌号键盘，兼容新能源号牌
话不多说,先看图使用方法: 一.将组件代码放入项目任意目录二.在需要使用键盘组件的页面json文件配置引入组件三.在模板页面wxml调用组件 <carNumber custom-input ...
uniapp 车牌号输入车牌号键盘新能源车牌键盘特殊车辆车牌键盘
1:效果图 2:代码: <template><view class="container"><view class="car_type_bo ...
uniapp 小程序车牌号输入键盘
之前写微信小程序时封装了车牌号输入键盘,记录在微信小程序组件中了,最近开发uniapp又重新开发了车牌号输入键盘组件,是在微信小程序开发的键盘组件的思想上做了一版优化,增加了挂车车牌号输入,及新能源车 ...
uniapp - 实现车牌号键盘与格子间隔显示组件，汽车牌照录入支持自定义样式、新能源等（附带组件完整源码，开箱即用，稍微改改就能用）
效果图 uniapp 全平台兼容,车牌号键盘输入.分格显示功能示例源码,注释很多! 可以直接复制一下,然后自己改改样式或功能就能使了. 示例源码复制,运行. &
vue移动端车牌号输入键盘组件封装（支持新能源车牌和uniapp）
一.效果图二.说明支持点击输入框删除或输入车牌,可直接在uniapp项目中运行,将view标签换为div.并且将rpx单位换成px可在vue项目里运行三.代码 <temp ...
小程序组件库开发之车牌号专属键盘
小程序开发过程中可能会碰到和车牌信息相关的开发,这时候就需要输入车牌号,传统的键盘输入车牌号,需要打出汉字,再选择相应的字母数字,并不是特别方便,这里笔者专门开发了车牌号键盘,可以任意选择修改省份,数 ...
小程序车牌号模拟虚拟键盘选择。车牌号虚拟键盘。作为组件使用
这里是作为组件使用的. 1.新建组件carCity 组件wxml书写 <view class='car'><view bindtap='showCity' class='carNo ...
移动端车牌号键盘组件
记录下小组件,方便日后用到 template <template><view class="main"><view class="title ...
微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...

uniapp车牌号组件

前言

uniapp车牌号组件相关推荐

最新文章

热门文章