小程序封装自定义键盘-车牌号键盘

已于 2023-10-23 17:31:49 修改
阅读量309 收藏
点赞数
分类专栏： 小程序 文章标签： javascript
于 2023-10-23 17:29:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71034563/article/details/133995027
版权 

<template>
  <view class="license">
    <view class="wrapperInfo">
    <view class="basicsInfo_license">
      <view class="basicsInfo_">请输入要办理的车牌号</view>
       <view class="license_s">
         <view :class="item.way === 'OIL' 
                  ? licenseDataIndex === index 
                  ? 'board boardYes' : 'board boardNo'
                  : licenseDataIndex === 7
                  ? 'boardFar boardFar-Yes'
                  : 'boardFar boardFar-No' " 
                  v-for="(item, index) in license" 
                  @click="typingInfo(index)"
                  :key="index">
                     {{ item.name }}
                    <text v-if="item.name === '' && item.way === 'NEW'" class="jiaFar" >+</text>
                    <text v-if="item.name === '' && item.way === 'NEW'" class="textar" >新能源</text>
         </view>
       </view>
      </view>
    </view>

    <chepan :startUsingKey = "startUsingKey" 
            :addType="addType" :keyNumber="keyNumber"
            @transmitAdd="transmitAdd"  @keyDelete = "keyDelete"
            @closeKye = "closeKye"
    />
  </view>
</template>

<script>
import chepan from './test.vue'
export default {
 name: 'test',
 components:{chepan},
 data() {
 return {
     // 车牌框
      license: [
        { name: "", way: "OIL" }, //京
        { name: "", way: "OIL" }, //f
        { name: "", way: "OIL" }, //0
        { name: "", way: "OIL" }, //9
        { name: "", way: "OIL" }, //2
        { name: "", way: "OIL" }, //3
        { name: "", way: "OIL" }, //k
        { name: "", way: "NEW" }, //?
      ],
      licenseDataIndex:null,
      startUsingKey:false, // 显示键盘
      addType:true , //显示不同的键盘字或字母
      keyNumber: null, //输入第几个职工
      // 处理车牌 传给后端的值
      restsFrom:{
        licenseData:[]
      }
 };
 },
 created() {

 },
 mounted() {

 },
 methods: {

  // 点击输入车牌
  typingInfo(index){
    console.log('按键下标', index)
    if(index === 0 ){
        this.licenseDataIndex = 0;
        this.addType = true;
    }else if (index < 8) {
        this.licenseDataIndex = index;
        this.addType = false;
      }
     this.keyNumber = index;
     this.startUsingKey = true
  },

 // 进行自动下步
  transmitAdd(item){
      console.log(item,'子组件传进来的值');
      const { keyNumber } = this;
      this.license[keyNumber].name = item;
      if (keyNumber != 7) {
        // 选中一次递进
        this.typingInfo(keyNumber + 1);
      }
      this.takeKeyData();
  },

  // 删除键盘输入内容
    keyDelete() {
      const { keyNumber } = this;
      this.license[keyNumber].name = "";
      if (Number(keyNumber) > 0) {
        // 选中一次递减
        this.typingInfo(keyNumber - 1);
      }
      this.takeKeyData();
    },

  // 点确定和取消 删除第一个车牌汉字
  closeKye(e){
     console.log('点确定和取消 删除第一个车牌汉字', e)
      this.startUsingKey = e; //关闭
      this.keyNumber = null;  //清除下标
      this.licenseDataIndex = null;  //清除下标
      this.addType == true;  // 变成汉字键盘
  },

  // 车牌处理
  takeKeyData(){
    this.restsFrom.licenseData = [];
      this.license.forEach((item, index) => {
        if (item.name) {
          this.restsFrom.licenseData.push(item.name);
        }
      });
      console.log(this.restsFrom.licenseData, "车牌处理传给后端的值");
  },
 }
};
</script>

<style scoped lang="scss">
 .license{
    background: #f7f7f7;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    .wrapperInfo {
    height: calc(100% - 270rpx);
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 24rpx 24rpx 222rpx;
    .basicsInfo_license{
       box-sizing: border-box;
       background: #ffffff;
       padding: 48rpx 24rpx 20rpx 36rpx;
       border-radius: 24rpx;
      .basicsInfo_{
        padding-top: 30rpx;
        font-size: 30rpx;
        color: #000;
        text-align: center;
      }
     .license_s{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 32rpx;
        .board{
            width: 64rpx;
            height: 92rpx;
            box-sizing: border-box;
            border-radius: 8rpx;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
        }
        .boardYes {
            background: #ffffff;
            border: 2rpx solid #26cf6d;
            color: #26cf6d;
         }
          .boardNo {
            background: #ffffff;
            border: 2rpx solid #efefef;
            color: #1c1c1c;
          }
         .boardFar {
            box-sizing: border-box;
            border-radius: 8rpx;
            opacity: 1;
            font-weight: 400;
            .jiaFar {
              margin-bottom: 8rpx;
              font-size: 25rpx;
              padding: 0rpx;
              color: #26cf6d;
            }
            .textar {
              font-size: 17rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #26cf6d;
              padding: 0rpx;
              margin: 0rpx;
            }
          }
          .boardFar-No {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #ebfff3;
            // padding: 17rpx 10rpx 17rpx;
            width: 64rpx;
            font-size: 36rpx;

            height: 92rpx;
            box-sizing: border-box;
          }
          .boardFar-Yes {
            width: 64rpx;
            height: 92rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #ebfff3;
            border: 2rpx dashed #26cf6d;
            font-size: 36rpx;
          }
       }
      }
    }
 }
</style>


//组件
<template>
  <view v-if="startUsingKey" class="keyBoard-max">
    <view class="keyboard">
      <view class="keyboard-top">
        <view class="buts" @click="closeKyes">取消</view>
        <view class="buts">车牌号键盘</view>
        <view style="color: #303133" class="buts" @click="closeKyes">确定</view>
      </view>
      <!-- 按键区 -->
      <view class="keyboard-bott">
         <view  v-if="addType" class="chineseKeys">
           <!-- 第一行 -->
           <view class="keys">
            <view
              @click="inputKeyboard(item)"
              class="chinese-key"
              v-for="(item, index) in provincesOne"
              :key="index"
              >
                 {{ item }}
              </view>
           </view>
             <!-- 第二行 -->
           <view class="keys">
            <view
              @click="inputKeyboard(item)"
              class="chinese-key"
              v-for="(item, index) in provincesTwo"
              :key="index"
              >
                 {{ item }}
              </view>
           </view>
             <!-- 第三行 -->
           <view class="keys">
            <view
              @click="inputKeyboard(item)"
              class="chinese-key"
              v-for="(item, index) in provincesThre"
              :key="index"
              >
                 {{ item }}
              </view>
           </view>
                <!-- 第四行 -->
           <view class="keys">
            <view @click="inputKeyboard(item)" class="chinese-key">
                 {{ provincesbut }}
            </view>

            <view class="chinese-key-delete" @click="keyDeletes"></view>  
           </view>
         </view>

          <!-- 数字 和 字母 -->
          <view v-if="!addType" class="alphanumericKey">
           <!-- 第一行数字 -->
            <view  class="keys">
                <view
                  @click="inputKeyboard(item)"
                  :class="Number(keyNumber) === 1  ? 'chinese-key chinese-key-no' : 'chinese-key'"
                  v-for="(item, index) in numbersOne"
                  :key="index"
                 >
                  {{ item }}
                 </view>
             </view>
               <!-- 第二行字母 -->
            <view  class="keys">
                <view
                 :class=" Number(keyNumber) > 1 && item === 'O'? 'chinese-key chinese-key-no' : 'chinese-key'"
                  @click="inputKeyboard(item)"
                  class="chinese-key"
                  v-for="(item, index) in numbersTwo"
                  :key="index"
                 >
                  {{ item }}
                 </view>
             </view>
               <!-- 第三行字母 -->
             <view  class="keys">
                <view
                  @click="inputKeyboard(item)"
                  class="chinese-key"
                  v-for="(item, index) in numbersThree"
                  :key="index"
                 >
                  {{ item }}
                 </view>
              </view>
                <!-- 第四行字母 -->
              <view  class="keys">
                 <view
                  @click="inputKeyboard(item)"
                  v-for="(item, index) in numbersbut"
                  :key="index"
                  :class="Number(keyNumber) != 6 && (item === '港' || item === '澳' || item === '学')
                    ? 'chinese-key chinese-key-no'
                    : 'chinese-key'"
                 >
                  {{ item }}
                 </view>
                 <view class="chinese-key-delete" @click="keyDeletes"></view>
              </view>
          </view>
        </view>
      </view>
  </view>
</template>

<script>
export default {
 name: 'test',
 components: '',
 props:{
    startUsingKey:{
      type: Boolean,
      default: false,
    },
    addType:{
      type: Boolean,
      default: true,
    },
    keyNumber:{
      default: null,
    },
 },
 data() {
 return {
    // 省份简写  (31)
      provincesOne: [  "京", "沪","粤", "津","冀","晋","蒙","辽","吉", "黑",  ],
      provincesTwo: [ "苏",  "浙","皖","闽", "赣", "鲁", "豫","鄂","湘", "桂", ],
      provincesThre: [ "琼", "渝", "川",  "贵", "云",  "藏","陕","甘", "青","宁",],
      provincesbut: ["新"],
      // 车牌输入  (10数字 + 25字母 + 3特殊汉子)
      numbersOne: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
      numbersTwo: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "O"],
      numbersThree: ["L", "M", "N", "K", "P", "Q", "R", "S", "T", "U"],
      numbersbut: ["港", "澳", "学", "V", "W", "X", "Y", "Z"]
 };
 },
 created() {

 },
 mounted() {

 },
 methods: {
  //  汉字按键
   inputKeyboard(text){
    console.log(text,'汉字按键');
     let ind = Number(this.keyNumber);
      console.log(ind,'父组件下标');
      if (ind > 1 && ind != 6) {
        console.log(11111111111);
        if ((text != "港") & (text != "澳") & (text != "学") && text != "O") {
          this.$emit("transmitAdd", text);
        }
      } else if (ind != 6) {
         console.log(22222222222);
        if ((text != "港") & (text != "澳") & (text != "学")) {
          this.$emit("transmitAdd", text);
        }
      } else if (ind > 1) {
         console.log(33333333333);
        if (text != "O") {
          this.$emit("transmitAdd", text);
        }
      }
   },
  //  删除
  keyDeletes(){
     this.$emit('keyDelete')
  },
  //  取消  确定
  closeKyes(){
    this.$emit("closeKye",false);
  },
 }
};
</script>

<style scoped lang="scss">
 .keyBoard-max{
      box-shadow: 0px 2px 8px 0px rgba(171, 171, 171, 0.5);
      position: fixed;
      bottom: 0rpx;
      z-index: 999;
      width: 100%;
      height: 604rpx;
      box-sizing: border-box;
      padding-bottom: 68rpx;
      background-color: #ffffff;
   .keyboard{
      box-sizing: border-box;
      width: 100%;
      background: #f7f7f7;
     .keyboard-top{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          box-sizing: border-box;
          padding: 22rpx 32rpx;
          background-color: #ffffff;
       .buts{
          font-size: 32rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #909399;
       }
     }

     .keyboard-bott{
        box-sizing: border-box;
        width: 100%;
        background: #f7f7f7;
      .chineseKeys{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 16rpx 22rpx 16rpx 24rpx;
      }
      .alphanumericKey{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 16rpx 22rpx 16rpx 24rpx;
      }

        .keys{
            width: 100%;
            height: 92rpx;
            margin-bottom: 16rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
        }
        .chinese-key{
          width: 64rpx;
          height: 92rpx;
          background: #ffffff;
          box-shadow: 0rpx 2rpx 0rpx 0rpx #898a8d;
          border-radius: 8rpx;
          opacity: 1;
          color: #303133;
          font-size: 36rpx;
          font-weight: 400;
          display: flex;
          margin-bottom: 16rpx;
          align-items: center;
          justify-content: center;
        }
        .chinese-key-no {
          color: #bababa !important;
        }
     }
   }
   // 删除键
      .chinese-key-delete {
        width: 134rpx;
        height: 92rpx;
        box-shadow: 0rpx 2rpx 0rpx 0rpx #898a8d;
        border-radius: 8rpx;
        opacity: 1;
        background: #c0c4cc
          url("https://static.igoodsale.com/ETC/chaxun-jianpan-shancu.png")
          no-repeat center;
        background-size: 55%;
      }
 }
</style>

柯吱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp(全端兼容) - 最新实现车牌号键盘与格子间隔显示组件，汽车牌照录入支持自定义样式、新能源等，uniapp全平台可用的汽车车牌号键盘输入功能（附带组件完整源码，开箱即用，稍微改改就能用）
高级前端工程师
04-12 3992
uniapp车牌组件，uniapp h5 小程序 app车牌号键盘，uniapp h5 小程序 app汽车牌照，uniapp h5 小程序 app车牌号输入功能插件，uniapp车牌号插件，uniapp实现车牌号输入框，uniapp app车牌号输入键盘功能源码，，uni-app 实现 车牌键盘，uniapp 车牌号输入 车牌号键盘 新能源车牌键盘 特殊车辆车，uni-app小程序车牌号键盘，uni-app + uview 车牌键盘，uniapp添加车牌组件的实现与使用，uniappH5 调起车牌号码键盘，
微信小程序——自定义键盘：自定义组件和父组件通过事件进行属性同步
semoon的博客
03-19 3669
微信小程序——自定义键盘：自定义组件和父组件通过事件进行属性同步 自定义组件触发事件时，需要在自定义组件中使用 triggerEvent 方法，指定事件名、detail对象和事件选项： 在对组件进行封装时 在当前页面想要获取组件中的某一状态，需要使用到this.triggerEvent(’ ',{},{}),第一个参数是自定义事件名称，这个名称是在页面调用组件时bind的名称，第二个对象就可以将...
微信小程序实现车牌号输入自定义键盘
qq_34724739的博客
09-26 1337
实现输入车牌号功能，I是在车牌号里不能输入得，在键盘上就没有展示，O是只在第二位上可以输入，addCarNumber 是保存接口了。js data键盘信息是写死得。
微信小程序车牌号输入组件（虚拟键盘）
李水灵的博客
12-03 6332
本文参考 微信小程序中实现车牌输入功能， 进行了更加细致的键盘划分、删除等功能 文中给出代码都是截图，完整代码在文末贴出。 组件效果 组件功能： 其中虚拟键盘、新能源车牌等功能均可使用 封装成一个组件可以直接 Import 使用 可以给定默认初始值（如 gif 中所示） 父组件通过 change 事件可以监听到车牌号每一次的变化 组件部分样式也可以给定 class 来自定义 可以规范用户输入车牌号，防止乱输引起的数据库错乱 组件思路 根据车牌号的规则，根据不同的第几位生成键盘 例如：第一位为省.
【uniapp前端组件】自定义车牌键盘
只会瞎搞
08-10 1750
车牌键盘组件，**该组件须与[自定义车牌输入键盘--输入框](https://ext.dcloud.net.cn/plugin?name=bugking7-carinput)配合使用，请勿单独使用**。当然你非要单独使用，可根据源码二次开发，来满足你的需求。......
微信小程序——车牌键盘组件实现
yunle51939的博客
11-27 2178
文章目录前言展示效果文件说明文件代码JSON文件app.json组件代码license-plate.jslicense-plate.wxmllicense-plate.wxss页面代码input-license.jsinput-license.wxmlinput-license.wxss总结 前言 微信小程序中导航栏一般来说是默认的展示标题等等，可以做的样式改变仅仅能通过配置一些官方提供的属性来实现。除此之外小程序还提供了navigationStyle这个属性可以让用户去自定义的实现导航栏。下面直接奉上代码
【uniapp前端组件】自定义万能键盘（数字键盘、带小数点数字键盘、身份证键盘、车牌号键盘）
只会瞎搞
09-03 6637
uniapp自定义万能键盘（数字键盘、带小数点数字键盘、身份证键盘、车牌号键盘） 简介 万能键盘是一款集数字键盘、带小数点的数字键盘、身份证键盘、车牌号键盘为一身的自定义键盘。 效果图 属性 属性 类型 可为空 备注 keyboardtype String 是 ‘number’:数字键盘（默认），‘digit’:带小数点数字键盘，‘idcard’:身份证键盘，‘car’:车牌键盘 defaultValue String 否 初始化键盘值，默认为’’,每次回调重新赋值 new
微信小程序车牌键盘组件实现介绍分析
承接各种网站建设开发定制
11-29 244
前言 微信小程序中导航栏一般来说是默认的展示标题等等，可以做的样式改变仅仅能通过配置一些官方提供的属性来实现。除此之外小程序还提供了navigationStyle这个属性可以让用户去自定义的实现导航栏。下面直接奉上代码来说明实现沉浸式导航栏。 展示效果 文件说明 涉及到的文件有app.json license-plate.js license-plate.wxml license-plate.wxss (这三个是封装的组件) input-license.js input-license.wxml i
uniapp车牌号组件
qq_34761385的博客
08-23 1984
前言 uniapp写的小程序需要车牌输入功能，不管是uniapp本身提供的组件还是第三方组件都没有提供车牌输入的组件功能。百度找了一下资料，发现车牌输出键盘组件都是自定义组件，也就是说得自己写。找了一圈一个能用的都没有，都不符合预期。不过也找到一个能用的，起码拿来改改还能用。 参考地址：https://www.jianshu.com/p/1e392e0705c4 它这个是针对移动端的vue车牌号输入组件，单位用的是rem，但是我要的是uniapp小程序输入组件。直接放到小程序中会出现样式...
微信小程序 - 自定义picker 封装成插件
06-27
微信小程序 - 自定义picker 封装成插件 可以自定义多级数据picker 最多四级 最少一级 自定义二级数据联动 自定义三级数据联动 自定义四级数据联动 封装成插件 全局使用
微信小程序 自定义组件 - 弹出菜单demo
03-29
我也很困惑这件事，今天了解到自定义组件这个概念，就试了试，感觉好像弥补了template的那个缺点，于是写了个小demo，也算做个笔记 我觉得 如果不需要传参，也不需要向外发送事件的，可以用include，相当于直接把...
微信小程序各种自定义组件
05-10
KeyBoard - 键盘 Loading - 指示器 Notification - 通知 Picker - 选择器 Prompt - 提示信息 Qrcode - 二维码 Rater - 评分组件 Refresher - 下拉刷新 Toast - 提示框 Toptips - 顶部提示 Vcode - 验证码 Xnumber - ...
微信小程序封装自定义弹窗的实现代码
10-17
主要介绍了微信小程序封装自定义弹窗的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序自定义组件-打卡日历组件
09-09
微信小程序自定义组件是开发微信小程序时非常关键的一部分，它允许开发者封装可复用的代码模块，提升开发效率和代码质量。在这个特定的案例中，我们关注的是一个名为"打卡日历组件"（rwjCalendar）的自定义组件。这...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1131
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 170
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 132
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 597
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
iOS开发实战：自定义表情键盘与组件封装
本文主要介绍了如何在iOS开发中创建自定义表情键盘，涉及了MVC设计模式、自动布局、自定义组件封装、Block回调以及CoreData的使用。作者首先强调了构建自定义表情键盘的复杂性，并展示了项目的基本目录结构，以MVC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值