自定义的车牌号键盘组件

2024-01-16 10:30

本文主要是介绍自定义的车牌号键盘组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在这里插入图片描述

<template><view class="keyboard-wrap" v-if="kbShow"><view class="head"><view class="done" @tap="done"><text class="iconfont iconxiala-"></text>关闭</view></view><view class="key-list"><view class="colspan" :class="{'active' : index === currentIndex }" v-for="(item, index) in keyboardList":key="index"><view class="uni-flex" v-for="(secondItem, secondIndex) in item" :key="secondIndex"><view class="item" :class="{'disable': thridItem.split(',')[1] == 'f'}"v-for="(thridItem, thridIndex) in secondItem" :key="thridIndex"@tap.stop="touchstartActive(thridItem)"><view class="content">{{thridItem.split(',')[0]}}</view></view></view></view><!-- 删除键 --><view class="item del-item" @tap.stop="del" :style="{right:(currentIndex==0?'10.5vw':'1vw') }"></view></view></view>
</template>
<script>export default {data() {return {keyboardList: [], //键盘类型currentIndex: 0 //键盘区当前下标}},props: ['kbIndex', 'kbType', 'kbShow'],mounted() {this.keyboardList = [[['京', '津', '晋', '冀', '蒙', '辽', '吉', '黑', '沪'],['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],['', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', ''],['', '', '陕', '甘', '青', '宁', '新', 'W', '', ''],],[['1,f', '2,f', '3,f', '4,f', '5,f', '6,f', '7,f', '8,f', '9,f', '0,f'],['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],],[['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],],[['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],],[['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],],[['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],],[['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'P', '学', '军'],['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警'],['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港', '澳', ''],],[['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'O', 'P', '军,f'],['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', '警,f'],['Z', 'X', 'C', 'V', 'B', 'N', 'M', '港,f', '澳,f', ''],]]},watch: {//获取键盘区域下标kbIndex: {immediate: true,handler(res) {//转为数字类型,防止数据类型不能匹配this.currentIndex = Number(res);}}},methods: {done() {this.kbShow = true;this.$emit('childClose', '');},//删除del() {this.$emit('childDel', this.currentIndex);if (this.currentIndex == 0) {return;}this.currentIndex--;this.$emit('childIndex', this.currentIndex);},//点击事件touchstartActive(res) {//键盘包含f字符不执行console.log(this.currentIndex, 'emitqian');if (res.split(',')[1] == 'f' || res == '') {return;}this.$emit('childValue', res);if (this.currentIndex == this.keyboardList.length - 1) {this.$emit('hide')}this.currentIndex++;this.$emit('childIndex', this.currentIndex);console.log(this.currentIndex, 'emithou');}}}
</script><style lang="less" scoped>@color: #007AFF;.keyboard-wrap {position: fixed;bottom: 0;right: 0;left: 0;width: 100%;z-index: 999;box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);box-sizing: border-box;.head {overflow: hidden;background-color: #ffffff;border-top: 1rpx #e6e5ef solid;.done {float: right;width: 150rpx;height: 90rpx;line-height: 90rpx;text-align: center;color: @color;font-size: 3.2vw;display: flex;.iconfont {margin-left: 6rpx;font-size: 30rpx;}}}.key-list {padding: 3.467vw 1.067vw 2.133vw;margin: 0 auto;text-align: center;background: #e3e9ec;}.uni-flex {display: flex;margin-bottom: 1.867vw;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;justify-content: center;}/*iphone键盘*/.item {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;margin-right: 1.067vw;font-size: 0;.content {display: inline-block;width: 100%;line-height: 12vw;font-size: 4vw;color: #0b0b0b;-webkit-box-shadow: 0 0.267vw 0.267vw #d7d7d7;box-shadow: 0 0.267vw 0.267vw #d7d7d7;background-color: #fff;border-radius: 1.067vw;z-index: 50;}&.disable .content {color: #dadada;background-color: #fff;}&.item:not(.disable):active .content {background-color: @color;color: #fff;}}.colspan {display: none;&.active {display: block;}}.del-item {position: absolute;right: 1vw;bottom: 2.5vh;width: 9vw;height: 12vw;background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAcCAYAAAD815boAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNTFhYzJlYi1mOWNhLWVmNDYtYjIxZS04ZTBkYTQ1ZWNhMDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQjczNURBQ0Y5MTFFODk5MkFDRDI4NDg4RTY5MjQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQjczNUNBQ0Y5MTFFODk5MkFDRDI4NDg4RTY5MjQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Nzc0MWYzYTAtNDYxMi00ZTQ4LWExNjYtMDA3YWI2ZDlmODg4IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6N2U1OGRjYzQtMjM3My0xMWU4LTk1OWYtZTA4MmNmMjVmYTkyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+W15VFwAAAchJREFUeNrMljtIAzEYx1Mt4mMQXO3sViehS0Xo4lZEHcTHpoObDxChIoiiiB0s7k4+kKKIgkIHFTddC07iIDqIkw8UxaL/wCeEmLtL0rN3f/hxdyUXfk3y5RLZye8zg0yCLKts7qsMGg+AFVb5NOtKpsA6iAQgyXQk42AP1LCA4iUZA0egkQUYN8kmEoyxgOMkWU+CcRaCqCSrwTZIWPR3CbbAh0e7c7ALSraSayBtIXgDkrRV8fffHdqtgg7QC3I2ktNg1HJWXsEX3RdAl0KUC44Lz8+mknwEFstYOq1gXniWRWXBdjCl03GUrmmfNusMXWck0RTNkih4TAWqJZmgQvFrs1aJFhSCDSbVndP9R4aiC4rfjQV/JUfAyz9sbyqROs1P8R/JIhgE3z4KykXCPKpeq7oPhDXktyCf4tlyRMWhX6IC8luQr8E5aY0aiYqSfLqH6dNmkysw4VIkGYVo1lSS5w308CO7hWRU6M+pimXRWpPNXMwdiZ5SNeqmBZzRiA65vMtF28AD6LeV5LmgrWnDcDSThFc6/Tr0boLlsJ4n5ak5DLtkidZXMcySPE+gGzyGWZLnGvSBzzBL8pyAsQAcb38EGADqpVx5N+uLlgAAAABJRU5ErkJggg==) no-repeat 50%;background-size: 5.467vw;border-radius: 1.067vw;// width: 20%;// height: 90rpx;.iconfont {line-height: 1;font-size: 50rpx;}}}.iconxiala- {background-size: 2.267vw;background-repeat: no-repeat;display: block;width: 5.867vw;height: 3vh;margin-top: 3.1vh;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjIxRTM1MkM5N0IwQjExRUFBMjg4REY0ODVCRTE2OUUzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjIxRTM1MkNBN0IwQjExRUFBMjg4REY0ODVCRTE2OUUzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MjFFMzUyQzc3QjBCMTFFQUEyODhERjQ4NUJFMTY5RTMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MjFFMzUyQzg3QjBCMTFFQUEyODhERjQ4NUJFMTY5RTMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6RjcO5AAAB+ElEQVR42ryWyytEURzHjWdKKRaExTSxYUEplFLyLK+EFDaShYUNC8VOMTvKCguPFSGPhaK88sjO5A/wWGBHNsgwje9Pv1PX8Zs7d+6NX32a7j1z72fOub/znesqmApG/VdF86cbLIBVUPhXslgQBw5ZSFUHmsGug/u6QDcoB/tgEQRJ5jGIqBLBhgMh/fh50MnHXSAezNIy3oAH7QIlrIlQRNetG0SqatUz84MG8ORQmAx2QL0wdmlskAtQ5UCYBo5AmTC2BbxGmRMhPe8TUCCMUWO08Or9kNkR5oJTkCOIJrkjA/o+syMsAscgU7jHCBigdpc2tSSsNBEO8/5J1cZpFn1g3CxBpPKZCMdAknbez3tqOlxcRSrU6xU0gWUr2WhF+BZi/Jmf8Y7VIA6Xc+28fFIlCEtqSxYDZsBQmIjaBNVOZBSeS6DXYiaGFYaS0bJsgzZh7BxUhOhSU6EkSwF73BR67XIzHJhsi5BCXZbBqVAsfHcFNIIXC/tQFBpl2eAM5AkiapIOFagWN/4voZLlc3K7BZGXIyhgI2l+CKP5b5yaIV37MoXoIOdg0GbSKGGJknmE5KZZ9ICJCF4JzIT9SnYNrgyD76CVX1oiLSV81M5/KtkHt/McWAOlPHW75eP73fPxLRj9zr0/fCOm18QscKdm9iXAAMhke9fXWcqOAAAAAElFTkSuQmCC);border-radius: 1.067vw;}</style>

这篇关于自定义的车牌号键盘组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/612270

相关文章

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter(过滤器)类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter(过滤器)简介dubbo 过滤器运行时机自定义 filter第一种 @A

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

四种Flutter子页面向父组件传递数据的方法介绍

《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1:使用 GlobalKey 和 State 调用子组件方法方法 2:通过回调函数(Callb

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用