自定义车牌

最新推荐文章于 2023-06-06 23:26:37 发布
置顶 最新推荐文章于 2023-06-06 23:26:37 发布
阅读量1k 收藏
点赞数
分类专栏： js css 文章标签： vue html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38259997/article/details/109191731
版权
js 同时被 2 个专栏收录
8 篇文章 0 订阅
订阅专栏
css
4 篇文章 0 订阅
订阅专栏

自定义车牌键盘，简单快捷，直接套用

最完整版本

<template>
<view @tap.stop="prevClose">
     <view class="payment_head">
    <view class="head_des">
        <view class="num"> 车牌号 </view>
        <view class="reset" @click="reset"> 重置 </view>
      </view>
      
      </view>
<!-- 车牌号码输入框 -->
<view class="input_carNumber">
  <!-- 车牌号头两位 -->
  <view class="carNumber-items">
      <!-- style='{{cars.carnumStyle1}}' -->
    <view class="carNumber-item" @click='openKeyboard' id="0" :class="currentFocusIndex==0?'plate-nums-foc':''">{{list[0] || ''}}</view>
    <view class="carNumber-item" @click='openKeyboard' id="1" :class="currentFocusIndex==1?'plate-nums-foc':''">{{list[1] || ''}}</view>
    <!-- 分隔圆点 -->
    <view class='carNumber_point'></view>
    <!-- 常规 -->
    <view class="carNumber-item" @click='openKeyboard' id="2" :class="currentFocusIndex==2?'plate-nums-foc':''" >{{list[2] || ''}}</view>
    <view class="carNumber-item" @click='openKeyboard' id="3" :class="currentFocusIndex==3?'plate-nums-foc':''">{{list[3] || ''}}</view>
    <view class="carNumber-item" @click='openKeyboard' id="4" :class="currentFocusIndex==4?'plate-nums-foc':''">{{list[4] || ''}}</view>
    <view class="carNumber-item" @click='openKeyboard' id="5" :class="currentFocusIndex==5?'plate-nums-foc':''">{{list[5] || ''}}</view>
    <view class="carNumber-item" @click='openKeyboard' id="6" :class="currentFocusIndex==6?'plate-nums-foc':''">{{list[6]}}</view>
    <!-- 新能源 -->  
    <view class="carNumber-item " :class="[currentFocusIndex==7?'plate-nums-foc':'',status ? '': 'carNumber-item-newpower']" id="7" @click='openKeyboard'>

      <view v-if="!status" @click='showPowerBtn'>
        <view class="carNumber-newpower-add">+</view>
        <view class="new-name">新能源</view>
      </view>
      <view  v-if="status">
        {{list[7]|| ''}}
      </view>
    </view>
  </view>
</view>
<!-- 虚拟键盘 -->
<!-- 虚拟键盘 -->
  <view class="keyboard" v-show='KeyboardState'>
    <view class="keyboardClose" @click.stop='closeKeyboard'>
        <view class="keyboardClose_btn" >完成</view>
    </view>
    <!-- 省份简写键盘 -->
    <view class="keyboard-item" v-if="carnumType==1">
        <view class="keyboard-line" v-for=" (item,index) in provinces" :key="index">
        <view v-if="((provinces.length -1) == index)" class="keyboard-switch" @click='keyboardSwitch'>ABC</view>
      <view class="keyboard-btn" @click.stop='bindChoose(1,items)' v-for="(items,key) in item" :key='key'>{{items}}</view>
      
        </view>
        <view class="keyboard-del" @click='bindDelChoose'>
          <image src="../../static/image/delete.png" class="icon-shanchu" mode="aspectFill"/>
        </view>
    </view>
    <!-- 车牌号码选择键盘 -->
    <view class="keyboard-item iscarnumber" v-if="carnumType==2">
        <view class="keyboard-line" v-for="(item,index) in numbers" :key="index">
        <view v-if="((numbers.length -1) === index)" class="keyboard-switch" @tap.stop='keyboardSwitch'>省份</view>
    <view class="keyboard-btn" @click.stop='bindChoose(2, items)'  v-for="(items,key) in item" :key='key'>{{items}}</view>   
        </view>
        <view class="keyboard-del" @click='bindDelChoose'>
          <image src="../../static/image/delete.png" class="icon-shanchu" mode="aspectFill"/>
        </view>
    </view>
  </view>
</view>
</template>
<script>
export default {
    data(){
        return{
             maxLength: 8,
                isAgreeTerms: true, //是否同意条款
                // 省份简写
                provinces: [
                  ["京", "津", "渝", "沪", "冀", "晋", "辽", "吉", "黑", "苏"],
                  ["浙", "皖", "闽", "赣", "鲁", "豫", "鄂", "湘", "粤", "琼"],
                  ["川", "贵", "云", "陕", "甘", "青", "蒙", "桂", "宁", "新"],
                  ["藏", "使", "领", "警", "学", "港", "澳"]
                ],
                // 车牌输入
                numbers: [
                  ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
                  ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
                  ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
                  ["Z", "X", "C", "V", "B", "N", "M"]
                ],
                // carnum: ["", "", "", "", "", "", "",""], //存储每个输入框的车牌号
                currentFocusIndex: 0,
                carnumType: 1,
                cars: null,
               KeyboardState: false,
               status :this.keyStatus,
                list:this.carnum
     }
    },
    mounted() {
        console.log(this.list,this.list.length)
      if(this.list.length==7||this.list==[]||this.list==''){
          this.status =false
      }else{
           this.status =true
      }
    },
//   computed: {
//       list: {
//           get() {
//             return JSON.parse(JSON.stringify(this.carnum));
//           }
//       }
//   },
  props:{
         keyStatus: {
                 type: Boolean,
                 default: false,
                 // twoWay: true
             },
              isxin: {
                 type: Boolean,
                 default: true,
                 // twoWay: true
             },
             carnum: {
                 type: Array,
                 default: [], //存储每个输入框的车牌号
                 // twoWay: true
             },
             
             // KeyboardState: {
             //   type: Boolean,
             //   default: false,
             //   // twoWay: true
             // }, //键盘状态,
             isUploadPage: {
               type: Boolean,
               default: false
             }
     
  },

   methods:{
  //阻止车牌键盘关闭
  prevClose () {
     this.KeyboardState = true
  },
reset(){
    this.list=[];
    this.currentFocusIndex=0
     this.carnumType = 1
      this.$emit('setCarNum',this.list)
},
  // 选中点击设置，输入内容，焦点位置自动后移一位
  bindChoose(numType, e) {    
    //输入内容
    var focusIndex = this.currentFocusIndex;    
   this.list[focusIndex] = e;
    var dstFocusIndex = focusIndex;  
    if (!this.status) {
      if (focusIndex < (this.list.length - 1)) {
        dstFocusIndex = parseInt(focusIndex) + 1;
      }
    }
    if (this.status) {
      if (focusIndex < (this.list.length )) {
        dstFocusIndex = parseInt(focusIndex) + 1;

      }
    }
   this.openKeyboard()

    console.log(111,this.status,focusIndex,this.list, e)
    this.$emit('setCarNum',this.list)
  },
    //删除内容
  bindDelChoose() {
    var focusIndex = this.currentFocusIndex;
    this.list.splice(focusIndex,1)   
    this.list[focusIndex] = "";
    if (this.currentFocusIndex ==0) {
      return
    }else{
      this.currentFocusIndex -- ;
    }
    //修复问题
    if(this.currentFocusIndex == 0){
       this.carnumType = 1
    }
   },
    showPowerBtn() {   
      this.status = true;
      this.KeyboardState = true;
    },
      //关闭键盘
    closeKeyboard() {
         this.KeyboardState = false;
    },
     //显示键盘
    openKeyboard(e) {
        console.log(e)
      var id = e?e.currentTarget.id:'';

    if ( this.currentFocusIndex===7) {
        this.status = true;
    }
    if(id){
         this.currentFocusIndex=parseInt( id)
    }
    else if(this.list[this.currentFocusIndex]) {
 this.currentFocusIndex++;
     }
  
    if(this.currentFocusIndex==8){
        this.KeyboardState=false;
    }
    else{
        if (this.currentFocusIndex ==0 ){
                this.carnumType = 1
            }else{
                this.carnumType = 2
            }
    }
   console.log(this.currentFocusIndex, this.carnumType)
    // let id = this.currentFocusIndex;
    //   this.carnumFocus(id);
    },
    keyboardSwitch (e) {
         if (this.currentFocusIndex == '0') {
           this.carnumType = 1       
         }else{
           this.carnumType = 2
         }
      },
    }
  
    }
 
</script>

<style lang="less" scoped>
 .payment_head {
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
    background-color: #fff;
    // height: 161rpx;
    padding: 30rpx 20rpx 38rpx 20rpx;
  }
      .head_des {
        display: flex;
        justify-content: space-between;
        // padding:30rpx 20rpx 38rpx 20rpx;
        .num {
          font-size: 28rpx;
          color: #011a37;
        }
        .reset {
          font-size: 28rpx;
          color: #006af1;
        }
      }
    
.line-horizontal {
  height: 1rpx;
  background: #EDEEF0;
}
.but-common {
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 55rpx;
  color: #FFFFFF;
  text-align: center;
  font-size: 34rpx !important;
  background: #0069F0;
}
.but-common.on {
  background: #E7E7E7;
}
.none-border-btn::after {
  border: none;
  border-radius: 0;
}
.bg-white {
  background: white;
}
.position-relative {
  position: relative;
}
.line-vertical {
  width: 1px;
  background: #F2F2F2;
}
.ml30 {
  margin-left: 30rpx;
}
.mr30 {
  margin-right: 30rpx;
}
.mt30 {
  margin-top: 30rpx;
}
.mb30 {
  margin-bottom: 30rpx;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-row-wrap {
  display: flex;
  flex-flow: row wrap;
}
.flex-column-wrap {
  display: flex;
  flex-flow: column wrap;
}
.none-border-btn::after {
  border: none;
  border-radius: 0;
}
.placeholder-Color {
  color: #8B8A99;
}
.white-space-nowrap {
  white-space: nowrap;
}
/* 输入框-车牌号*/
.input_carNumber {
  
  border-radius: 4rpx;
  background: #fff;
  position: relative;
  margin: 0 20rpx 20rpx 20rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;

}
.carUnmberContainter {
  border: none;
  // padding: 0;
}
/* 车牌号码 */
.carNumber-items {
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  /*设置显示样式**/
  align-items: center;
  /**子view垂直居中*/
  vertical-align: ceter;
  justify-content: space-between;

}
/* 分隔圆点 */
.carNumber_point {
  width: 12rpx;
  height: 12rpx;
  background: #ccc;
  border-radius: 6rpx;
  margin: 0rpx 4rpx;
}
.carNumber-item {
width: 68rpx;
height: 88rpx;
  font-size: 36rpx;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 2rpx;
  line-height: 80rpx;
  display: inline-block;
  vertical-align: middle;
  margin-right: 12rpx;
}
/* 新能源 */
.carNumber-item-newpower {
  border: 1px dashed #CCCCCC;
  color: #D8D8D8;
  font-size: 16rpx;
  line-height: 22rpx;
}
/* 虚拟键盘 */
.keyboard {
  height: auto;
  background: #d1d5d9;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  z-index: 100;
}
.keyboard-item {
  padding: 10rpx 0 5rpx 0;
  position: relative;
  display: block;
}
/* 关闭虚拟键盘 */
.keyboardClose {
  height: 70rpx;
  background-color: #EEEEEE;
  overflow: hidden;
}
.keyboardClose_btn {
  float: right;
  line-height: 70rpx;
  font-size: 30rpx;
  padding-right: 30rpx;
  color: #2667D7;
}
/* 虚拟键盘-省缩写 */
/* 虚拟键盘-行 */
.keyboard-line {
  margin: 0 auto;
  text-align: center;
}
.iscarnumber .keyboard-line {
  margin-left: 5rpx;
  margin: 0 auto;
  text-align: center;
}
/* 虚拟键盘-单个按钮 */
.keyboard-btn {
  font-size: 34rpx;
  color: #333333;
  background: #fff;
  display: inline-block;
  padding: 18rpx 0;
  width: 63rpx;
  text-align: center;
  box-shadow: 0 2rpx 0 0 #999999;
  border-radius: 10rpx;
  margin: 5rpx 6rpx;
  /* background: red; */
}
/* 虚拟键盘-删除按钮 */
.keyboard-del {
  color: #333333;
  width: 63rpx;
  background: #A7B0BC;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx 12rpx;
  box-shadow: 0 2rpx 0 0 #999999;
  border-radius: 8rpx;
  position: absolute;
  bottom: 14rpx;
  right: 24rpx;
}
.icon-shanchu {
  width: 42rpx;
  height: 42rpx;
}
.keyboard-switch {
  width: 48px;
  font-size: 14px;
  color: #333333;
  background: #A7B0BC;
  display: inline-block;
  margin: 4rpx 4rpx;
  padding: 18rpx 0;
  box-shadow: 0 2rpx 0 0 #999999;
  border-radius: 10rpx;
  position: absolute;
  bottom: 10rpx;
  left: 6rpx;
}
.carNumber-newpower-add {
  font-size: 44rpx;
  margin: 14rpx 0;
}
.new-name {
  font-size: 18rpx;

}

.plate-nums-foc{ 
border: 2rpx solid #006AF1;
}
</style>
小杨的旺仔没有牛奶
关注
专栏目录
自定义的车牌键盘
03-08
网上类似的demo也很多，万变不离其宗。上传一下节省很多时间
安卓自定义车牌录入编辑框
10-23
安卓系统设置车牌号码，通过自定义密码编辑器和自定义滚轮完成，自定义键盘（各省市缩写以及港澳牌照）.
一款方便车牌号输入的键盘和文本框
weixin_34417183的博客
06-23 2224
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序 自定义车牌键盘测试demo
12-15
微信小程序 自定义车牌键盘 测试demo
自定义车牌号输入键盘
10-15
自适应的自定义车牌号输入键盘， jQuery基于layui制作手机端车牌号码输入弹出键盘选择，支持新能源汽车车牌输入格式代码。
自定义车牌号键盘_Android(Java)
06-14
本文将深入探讨如何使用Java语言在Android平台上实现一个自定义车牌号键盘。 首先，我们要明白自定义键盘的基本原理。Android系统提供了一个叫做`InputMethodService`的服务，它是`Service`的一个子类，专门用于...
自定义车牌键盘(vue版)
09-01
自己写的一款车牌键盘,主要针对手机端,若想用于pc端自己修改下样式 体验地址:http://tool.heimaozy.com/T/carKeyword
android自定义车牌号输入法
12-14
很多的移动应用中经常需要限定用户输入特定的字符,比如... 比如车牌号输入法.最近我在项目中遇到的一个车牌输入法的问题,需要限定用户第一个字符只能是34个省份汉字简称,第二位为大写字母,余下5位为数字+字母大写的形势
IOS自定义车牌选择界面
12-09
此外，自定义车牌的键盘选择功能允许用户通过键盘输入或者选择预设的车牌号码。 首先，我们需要理解iOS中的UI设计原则。在创建车牌选择界面时，我们可以使用`UIKit`框架中的控件，如`UILabel`来展示车牌信息，`...
C#(Wpf)实现小键盘
weixin_30834783的博客
08-23 385
C#(Wpf)实现小键盘 原文:C#(Wpf)实现小键盘花了一天时间小键盘基本功能已完成，先看看效果图吧！ 默认： Shift： Caps Lock： Button style <Style x:Key="KeyButton" TargetType="B...
车牌号码输入控件，通过点击输入
09-03
车牌号码输入控件，通过点击输入简称、字母、数字，可自定义简称
CarNumberKeyBoard:一个车牌号键盘
05-13
这是一个车牌号键盘演示，包含中国3​​4个省。
通过自定义键盘输入车牌号
xxdw1992的博客
06-21 2487
KeyboarView的一些属性android：keyBackground   键盘每个键的背景。android：keyPreviewLayout   键盘每个键的布局资源。android：keyPreviewOffset   键盘每个键的垂直偏移量。android：keyTextColor   键盘每个键文字的颜色。android：keyTextSize   键盘每个键文字的大小。android...
前端实现车牌号输入框组件封装
qq_42415827的博客
03-23 3762
uniapp 实现自定义车牌号码选择
.net C# inputBox文字输入对话框，类似delphi的inputBox
ak28017172的博客
11-19 268
private string InputBox(string Caption, string Hint, string Default) { Form InputForm = new Form(); InputForm.MinimizeBox = false; InputForm.Max...
C#可视化 汽车之家管理系统（具体做法及全部代码）
最新发布
Mr_wangzu的博客
06-06 593
题目：1.首次打开页面，展示所有汽车信息列表，如图 1 所示。图 1 页面初始化效果2. 系统能根据汽车型号进行检索，点击“搜索”，在列表中展示符合所选状态的数据，如图 2 所示。图 2 按条件查询轿车信息3. 鼠标右键在列表页单击某一行，弹出删除菜单，如图 3图3 删除菜单单击删除后，弹出确定对话框，如图 4，用户单击“是”则删除当前选中行，并刷新列表，单击否则关闭提示框，不执行删除。图4 删除确定对话框4. 点击“添加”按钮，打开添加汽车信息窗体，如图5所示。
车牌号
qxqsunshine的博客
06-19 273
车牌号 时间限制：3000 ms  |  内存限制：65535 KB 难度：1 描述茵茵很喜欢研究车牌号码，从车牌号码上可以看出号码注册的早晚，据研究发现，车牌号码是按字典序发放的，现在她收集了很多车牌号码，请你设计程序帮她判断注册较早的号码。车牌号码由5个字母或数字组成 输入第一行是n，代表有n组数据，第二行是m，以下m行是m个车牌号码 其中n 输出输出注
C#添加虚拟键盘
深海小黄鱼
11-29 3268
系统自带的虚拟键盘调用方法： void tbPEID_GotFocus(object sender, EventArgs e)         {             System.Diagnostics.Process.Start("osk.exe");         } 在网上找到的一个自己写的虚拟键盘： using System; using System.C
小程序自定义键盘车牌号输入
weixin_40793759的博客
11-18 1314
page { background: rgba(248, 248, 248, 1); display: flex; flex-direction: column; justify-content: flex-start; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC"...
uniapp自定义车牌键盘
05-25
Uniapp中自定义车牌键盘可以通过以下步骤实现： 1. 引入第三方车牌号码输入库，比如 `vue-car-number-keyboard` 2. 在页面中使用该组件，并设置相关属性和事件，比如： ``` v-model="carNumber" :maxlength=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值