uniapp vue2 车牌号输入组件记录

2024-01-05 16:44

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

uniapp vue2 车牌号输入案例记录

组件如图
在这里插入图片描述

直接上代码

1.html

<template><view><view class="plate" :class="{'show': show}"><view class="itemFirst flex-d"><view class="item item1" @click="handleChange(0)">{{ plateNumber[0] || '京' }}</view><view class="item item1" @click="handleChange(1)">{{ plateNumber[1] }}</view></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 class="newDot flex-c">新能源</view><view class="" v-if="plateNumber[7]"><text>{{ plateNumber[7] }}</text></view></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>

2.js

<script>export default {name: "plate",props: {number: {type: Array,default: []}},watch: {number(newVal, oldVal) {this.plateNumber = newVal}},data() {return {show: false,plateNumber: this.number,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', '挂', '警', '学', '港', '澳',]}},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>

3.css

<style scoped lang='scss'>.new-energy {box-sizing: border-box;border: 2rpx dashed #03BE9F;font-weight: bold;height: 84rpx;background: red;width: 100%;position: relative;.newDot {width: 55rpx;height: 30rpx;border-radius: 50rpx;background: #03BE9F;font-size: 16rpx;color: #fff;position: absolute;top: -20rpx;left: 7rpx;}}.plate {display: flex;justify-content: space-between;.item {width: 70rpx;height: 84rpx;background-color: #F3F4F7;border-radius: 8rpx;text-align: center;line-height: 84rpx;font-size: 32rpx;color: rgba(0, 0, 0, 0.90);font-weight: bold;position: relative;/* margin 18rpx 0 .active {background-color: #bbbbbb;} */}.itemFirst {border-radius: 8rpx;padding: 18rpx 0;height: 84rpx;box-sizing: border-box;background-color: #F3F4F7;.item1 {height: 48rpx;line-height: 48rpx;border-radius: 0;}.item:nth-child(1) {border-right: 2rpx solid #DFDFDF;}}.emptyNew {height: 54px;line-height: 30rpx;text {color: #03BE9F;font-size: 18rpx;}}.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: 80rpx;height: 84rpx;margin-right: 8rpx;margin-bottom: 8rpx;vertical-align: top;border-radius: 8rpx;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>

这篇关于uniapp vue2 车牌号输入组件记录的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

国内环境搭建私有知识问答库踩坑记录(ollama+deepseek+ragflow)

《国内环境搭建私有知识问答库踩坑记录(ollama+deepseek+ragflow)》本文给大家利用deepseek模型搭建私有知识问答库的详细步骤和遇到的问题及解决办法,感兴趣的朋友一起看看吧... 目录1. 第1步大家在安装完ollama后,需要到系统环境变量中添加两个变量2. 第3步 “在cmd中

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

Spring Retry 实现乐观锁重试实践记录

《SpringRetry实现乐观锁重试实践记录》本文介绍了在秒杀商品SKU表中使用乐观锁和MybatisPlus配置乐观锁的方法,并分析了测试环境和生产环境的隔离级别对乐观锁的影响,通过简单验证,... 目录一、场景分析 二、简单验证 2.1、可重复读 2.2、读已提交 三、最佳实践 3.1、配置重试模板

在 Spring Boot 中使用异步线程时的 HttpServletRequest 复用问题记录

《在SpringBoot中使用异步线程时的HttpServletRequest复用问题记录》文章讨论了在SpringBoot中使用异步线程时,由于HttpServletRequest复用导致... 目录一、问题描述:异步线程操作导致请求复用时 Cookie 解析失败1. 场景背景2. 问题根源二、问题详细分

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

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