uniapp车牌组件

已于 2022-11-27 21:08:10 修改
阅读量1.3k 收藏 1
点赞数 1
分类专栏： uniapp 文章标签： uni-app vue.js javascript
于 2022-11-27 21:05:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38389533/article/details/128069851
版权

Vue 组件开发 用户交互 车牌输入 数据绑定
关键词由CSDN通过智能技术生成

组件描述：

该组件可以输入车牌号码的形式，输入框为车牌的形式，简单实用，比起正则验证要强上太多。

在这里插入图片描述


一、组件代码

<template>
    <view>
        <view class="plate" :class="{'show': show}">
            <view class="item" :class="{'active': index === 0}" @click="handleChange(0)">
                {{ plateNumber[0] }}
                <text class="triangle"></text>
            </view>
            <view class="item" :class="{'active': index === 1}" @click="handleChange(1)">{{ plateNumber[1] }}</view>
            <view class="point">●</view>
            <view class="item" :class="{'active': index === 2}" @click="handleChange(2)">{{ plateNumber[2] }}</view>
            <view class="item" :class="{'active': index === 3}" @click="handleChange(3)">{{ plateNumber[3] }}</view>
            <view class="item" :class="{'active': index === 4}" @click="handleChange(4)">{{ plateNumber[4] }}</view>
            <view class="item" :class="{'active': index === 5}" @click="handleChange(5)">{{ plateNumber[5] }}</view>
            <view class="item" :class="{'active': index === 6}" @click="handleChange(6)">{{ plateNumber[6] }}</view>
            <view class="item new-energy" :class="{'active': index === 7}" @click="handleChange(7)">
                <view v-if="plateNumber[7] || plateNumber[7] === 0">
                    <text>{{ plateNumber[7] }}</text>
                </view>
                <uni-icons type="plusempty" size="13" color="#03BE9F" v-else></uni-icons>
            </view>
        </view>
        <section class="panel" :class="{'show': show}">
            <view class="header">
                <view @click="handleReset">重置</view>
                <view @click="show = false">完成</view>
            </view>
            <view class="panelList">
                <view class="item" v-for="(item, idx) of currentDatas" :key="idx">
                    <view :class="{'disabled': (index == 1 && idx < 10) || (index > 1 && index < 6 && idx > 33) }"
                        v-if="item !==''" @click="handleClickKeyBoard(item, idx)"
                    >{{ item }}</view>
                </view>
                <view class="item backspace" :class="{'special': index === 0 }" @click="handleDelete">×</view>
            </view>
        </section>
    </view>
</template>
<script>
    export default {
        name: "plate",
        data() {
            return {
                show: false,
                index: -1,
                areaDatas: [
                    '京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏',
                    '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼',
                    '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', 
                    '藏', '使', '领', '', '', '', '', '', ''
                ],
                characterDatas: [
                    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 
                    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 
                    'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 
                    'W', 'X', 'Y', 'Z', '挂', '警', '学','港', '澳',  
                ]
            }
        },
        props: {
            plateNumber: {
                type: Array,
                default: Array.from({
                    length: 8
                }, v => '')
            }
        },
        computed: {
            currentDatas() {
                return this.index === 0 ? this.areaDatas : this.characterDatas;
            }
        },
        methods: {
            handleChange(index) {
                this.index = index;
                this.show = true;
            },
            handleClickKeyBoard(item, idx) {
                if((this.index === 1 && idx < 10) || (this.index > 1 && this.index < 6 && idx > 33)) {
                    return;
                }
                if (this.index < 8) {
                    this.$set(this.plateNumber, this.index, item);
                    this.$emit("myPlateChange", this.plateNumber);
                }
                if (this.index < 7) {
                    this.index++;
                }
            },
            // 重置
            handleReset() {
                this.index = 0;
                for(let i = 0; i < 8; i++) {
                    this.$set(this.plateNumber, i, '');
                }
                this.$emit("myPlateChange", this.plateNumber);
            },
            // 删除
            handleDelete() {
                this.$set(this.plateNumber, this.index, '');
                this.$emit("myPlateChange", this.plateNumber);
                if(this.index > 0) {
                    this.index--;
                }
            }
        }
    }
</script>
<style scoped lang='less'>
    .plate {
        display: flex;
        justify-content: space-between;
        .item {
            width: 64rpx;
            height: 80rpx;
            background-color: #F3F4F7;
            border-radius: 8rpx;
            text-align: center;
            line-height: 80rpx;
            font-size: 32rpx;
            color: rgba(0,0,0,0.90);
            font-weight: bold;
            position: relative;
            &.active {
                background-color: #bbbbbb;
            }
        }
        .new-energy {
            box-sizing: border-box;
            border: 2rpx dashed #03BE9F;
            font-weight: bold;
            uni-icons {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .point {
            height: 80rpx;
            text-align: center;
            line-height: 80rpx;
            color: #BDC4CC;
            font-size: 18rpx;
        }
        .triangle {
            width: 0;
            height: 0;
            border: 6rpx solid transparent;
            border-right-color: #00C69D;
            border-bottom-color: #00C69D;
            border-radius: 1rpx 2rpx 1rpx;
            position: absolute;
            right: 6rpx;
            bottom: 6rpx;
        }
    }
    .panel {
        position: fixed;
        left: 0;
        width: 100%;
        bottom: 0;
        z-index: 999;
        box-sizing: border-box;
        background-color: #F5F5F5;
        transition: all 0.3s ease;
        transform: translateY(100%);
        &.show {
            transform: translateX(0);
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24rpx;
            height: 96rpx;
            color: #2080F7;
            font-size: 34rpx;
        }
        .panelList {
            padding: 0 19rpx 20rpx;
            .item {
                display: inline-block;
                width: calc(~"(100% - 72rpx) / 10");
                height: 84rpx;
                margin-right: 8rpx;
                margin-bottom: 8rpx;
                vertical-align: top;
                view {
                    width: 100%;
                    height: 84rpx;
                    line-height: 84rpx;
                    border-radius: 6rpx;
                    background: #FEFFFE;
                    font-size: 32rpx;
                    color: rgba(0,0,0,0.90);
                    font-weight: bold;
                    text-align: center;
                    &.disabled {
                        background-color: rgba(254, 255, 254, 0.6);
                        color: rgba(0, 0, 0, 0.23);
                    }
                }
                &:nth-of-type(10n) {
                    margin-right: 0;
                }
            }
            .backspace {
                vertical-align: top;
                font-size: 48rpx;
                font-weight: bold;
                text-align: center;
                height: 84rpx;
                line-height: 84rpx;
                border-radius: 6rpx;
                background: #FEFFFE;
                color: rgba(0,0,0,0.90);
            }
        }
    }
</style>

二、组件使用

<template>
  <view class="car">
  			<view class="title">
  				车牌号码<text class="icon">*</text>
  			</view>
  			<Plate :plateNumber="plateNumber" @myPlateChange="plateChange" />
  			<button class="submit" @click="handleSave">保存</button>
  </view>
</template>

<script>
  export default {
    //载入组件
    components: { Plate},
    data() {
			return {
				plateNumber: ['', '', '', '', '', '', '', ''],
      }
    },
    methods: {
			//车牌
			plateChange(val) {
				this.plateNumber = val;
			},
      			// 保存
			handleSave() {
				let plate = "";
				this.plateNumber.forEach((item, index) => {
					if(index === 1) {
						plate = plate + item + "·";
					} else {
						plate += item;
					}
				})
				this.valiFormData.carNumber=plate
				console.log(plate);
			},	
    }
  }  
</script>

<style lang="scss" scoped>
.car {
			width:  800rpx;
	        height: 376rpx;
	        margin: 16rpx auto;
	        background-color: #FFFFFF;
	        box-shadow: 0 4rpx 20rpx 0 rgba(101,108,106,0.1);
	        border-radius: 16rpx;
	        padding: 0 32rpx;
	        box-sizing: border-box;
	        position: relative;
	        .title {
	            height: 104rpx;
	            line-height: 104rpx;
	            font-family: PingFangSC-Regular;
	            font-size: 28rpx;
	            color: rgba(0,0,0,0.90);
	            .icon {
	                font-size: 32rpx;
	                color: #FA3239;
	                vertical-align: middle;
	                margin-left: 4rpx;
	            }
	        }
	        .submit {
	            height: 96rpx;
	            line-height: 96rpx;
	            background: #02BA94;
	            border-radius: 16rpx;
	            color: #FFFFFF;
	            font-size: 34rpx;
	            margin-top: 48rpx;
	            bottom: 48rpx;
	            position: absolute;
	        }
	    }
  
</style>
飞
关注
专栏目录
uniapp(全端兼容) - 最新实现车牌号键盘与格子间隔显示组件，汽车牌照录入支持自定义样式、新能源等，uniapp全平台可用的汽车车牌号键盘输入功能（附带组件完整源码，开箱即用，稍微改改就能用）
高级前端工程师
04-12 4201
uniapp车牌组件，uniapp h5 小程序 app车牌号键盘，uniapp h5 小程序 app汽车牌照，uniapp h5 小程序 app车牌号输入功能插件，uniapp车牌号插件，uniapp实现车牌号输入框，uniapp app车牌号输入键盘功能源码，，uni-app 实现 车牌键盘，uniapp 车牌号输入 车牌号键盘 新能源车牌键盘 特殊车辆车，uni-app小程序车牌号键盘，uni-app + uview 车牌键盘，uniapp添加车牌组件的实现与使用，uniappH5 调起车牌号码键盘，
uniapp车牌输入 uni-plate-input-master_uniapp_uniapp车牌号_uniapp车牌输入_un
10-04
uniapp中使用的车牌输入控件，弹出键盘点选
uniapp车牌号键盘组件
A1123352950的博客
12-27 1293
uniapp解决车牌号键盘
封装车牌号码输入组件
最新发布
人间草木
08-26 260
【代码】封装车牌号码输入组件。
uniapp 实现车牌输入
qq_40326609的博客
03-27 894
【代码】uniapp 实现车牌输入。
uni-app/vue封装车牌选择器
榴莲不好吃的专栏
12-27 1590
2.初始化的时候将input下的真是inputdom绑定keyup事件调用skipnext，并传入每一个input的index,同时绑定compositionstart和compositionend。3.对按键进行处理，如果当前文本框已经输入完成则跳转到下一个文本框，如果没有则停留在当前文本框，第一次输入的时候，前面的没有输入完成，则不可跳过前面的号码去输入后面的号码，当删除后则解除禁止。* ===== 使用场景 ======1.将每一个字符用文本框输入，代码如下。// 添加延迟，防止过快输入。
uniapp vue2 车牌号输入组件记录
一个超爱喝可乐的web前端攻城狮
01-05 833
【代码】uniapp vue2 车牌号输入组件记录。
uni-app 车牌录入组件封装（支持新能源）
qq_40007317的博客
06-22 1819
uni-app 车牌录入组件封装（支持新能源）
微信小程序 车牌号输入组件
神尐破
08-21 1946
有时候我们开发过程中会遇到需要用户输入车牌号的情况，让客户通过自带键盘输入，体验不好且容易出错，例如车牌号是不能输入O和I的，因此需要有一个自定义的键盘，让客户输入正确的车牌号viewtools.wxs 主要作用是补0，让界面好看些，如果有需要可以在这里改逻辑实现// 把车牌字符串转为数组if (!
uniapp 小程序车牌号输入键盘
lwx931449660的博客
02-08 4610
之前写微信小程序时封装了车牌号输入键盘，记录在微信小程序组件中了，最近开发uniapp又重新开发了车牌号输入键盘组件，是在微信小程序开发的键盘组件的思想上做了一版优化，增加了挂车车牌号输入，及新能源车辆车牌号输入功能，功能如下： html <template> <!--车牌号输入组件--> <view v-if="show" class="trailer-keyboard"> <u-popup :show="show" :closeOnCli.
"车牌号码"组件:<vehicleno> —— 快应用组件库H-UI
H-UI官方博客
04-05 538
车牌号码组件——快应用组件库H-UI 获得焦点时的状态： 空值时自动校验： 不符合格式要求时自动校验： 输入格式正确时： <import name="form" src="../Common/ui/h-ui/form/c_form"></import> <import name="vehicleno" src="../Common/ui/h-ui/form/...
手机端车牌号码键盘的vue组件
08-10
手机端车牌号码键盘的vue组件
车牌控件jQuery+js
12-12
jQuery+js移动端输入框键盘键入车牌号码特效源码，配置即可用
html汽车车牌输入插件
11-08
自己手写的html汽车车牌输入插件，可区分普通汽车与新能源汽车
wx-vehicleKeyboard:微信小程序 车牌号输入键盘组件(vehicleKeyboard)
05-25
(实际使用时按键大小样式可能有点问题，自己修改就好辣 :) ) wx_vehicleKeyboard 微信小程序 车牌号输入键盘组件(vehicleKeyboard) 效果图 使用说明： 组件使用示例： "usingComponents": { "v-keyboard": "/components/vehicleKeyboard/vehicleKeyboard" } 组件属性： show: true/false 默认为true 虚拟键盘的显示与隐藏。 useInput: true/false 默认为true 是否使用组件中的输入框（如果不需要，可以仅仅使用虚拟键盘，获得输入车牌后自行处理后续业务逻辑） 方法： 在使用组件的页面的js代码中： handletapkey (e) { const platenum = e.detail.platenum console.l
车牌号录入控件
01-17
VB编写的车牌号录入控件，可以在工程中直接引用部件
Vue H5 前端自定义车牌号输入键盘(支持新能源)
Hubery96的博客
08-12 2879
这个项目是基于 vue2+vant 写的录入车牌的键盘, 有需要的伙伴可以参考一下;
uniapp车牌号组件
qq_34761385的博客
08-23 2058
前言 uniapp写的小程序需要车牌输入功能，不管是uniapp本身提供的组件还是第三方组件都没有提供车牌输入的组件功能。百度找了一下资料，发现车牌输出键盘组件都是自定义组件，也就是说得自己写。找了一圈一个能用的都没有，都不符合预期。不过也找到一个能用的，起码拿来改改还能用。 参考地址：https://www.jianshu.com/p/1e392e0705c4 它这个是针对移动端的vue车牌号输入组件，单位用的是rem，但是我要的是uniapp小程序输入组件。直接放到小程序中会出现样式...
vue element-ui 车牌号选择组件
askuld的博客
06-18 753
【代码】vue element-ui 车牌号选择组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值