uniapp车牌号组件

最新推荐文章于 2024-09-11 16:27:20 发布

流情

最新推荐文章于 2024-09-11 16:27:20 发布

阅读量2k

点赞数

分类专栏： vue 工具文章标签：小程序 uni-app vue

本文链接：https://blog.csdn.net/qq_34761385/article/details/119867001

版权

工具同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

vue

14 篇文章 2 订阅

订阅专栏

前言

uniapp写的小程序需要车牌输入功能，不管是uniapp本身提供的组件还是第三方组件都没有提供车牌输入的组件功能。百度找了一下资料，发现车牌输出键盘组件都是自定义组件，也就是说得自己写。找了一圈一个能用的都没有，都不符合预期。不过也找到一个能用的，起码拿来改改还能用。

参考地址：https://www.jianshu.com/p/1e392e0705c4

它这个是针对移动端的vue车牌号输入组件，单位用的是rem，但是我要的是uniapp小程序输入组件。直接放到小程序中会出现样式问题。不过只要改一下单位就行，改完之后效果如下：

总结了一下，一共两个vue文件即可，一个是组件keyword.vue，放到compenents组件目录即可，另一个是carlicense.vue，负责调用组件。废话不多说，直接上代码。

目录结构：

keyword.vue文件

<template lang="">
    <div>
        

<div class='panel-wrap'  v-if="isShow" data-value="exit"  @click='colse_da'>
  <div class="vehicle-panel" :style="{background:backgroundColor}">
      <!-- height:'500rpx'; -->
  <div class='topItem'>
    <span class='check'  @click='check'>中/英</span>
    <span class='contentShow'>{{oinp}}</span>
    <span class='exit' @click='vehicleTap("exit")'>取消</span>
    
  </div>
  <!--省份简写键盘-->
  <div v-if="keyBoardType === 1">
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle1" @click='vehicleTap(item)' :key="item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle2" @click='vehicleTap(item)'  :key="item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle3" @click='vehicleTap(item)'  :key="item">
        {{item}}
      </div>
       <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
      <img src='../static/images/door.png' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
    </div>
    </div>
   
    <div class="vehicle-panel-row-last">
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)'  v-for="(item,idx) in keyVehicle4" :style="{border:buttonBorder}"
        :key="item">{{item}}</div>
    </div>
  </div>
  <!--英文键盘  -->
  <div v-else>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-number' @click='vehicleTap(item)'  v-for="(item,idx) in keyNumber" :style="{border:buttonBorder}"
        :key="item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyEnInput1" @click='vehicleTap(item)'   :key="item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput2" @click='vehicleTap(item)'   :key="item">{{item}}</div>
      <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
        <img src='../static/images/door.png' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
      </div>
    </div>
    <div class="vehicle-panel-row-last">
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput3"
        :key="item">{{item}}</div>
      <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-ok' @click='vehicleTap("ok")' >确定</div>
    </div>
  </div>
</div>
</div>
    </div>
</template>
<script>
	export default {
	  name:'keyword',
	  props:{
	    isShow: false,
	    oinp: ""
	  },
	  data() {
	    return {
		  fontsize:20,
	      keyVehicle1: ["陕", "京", "津", "沪", "冀", "豫", "云", "辽"],
	      keyVehicle2: ["黑", "湘", "皖", "鲁", "新", "苏", "浙", "赣"],
	      keyVehicle3: ["鄂", "桂", "甘", "晋", "蒙", "吉", "闽"],
	      keyVehicle4: ["粤", "川", "青", "藏", "琼", "宁", "贵", "渝"],
	      keyNumber: "1234567890",
	      keyEnInput1: "QWERTYUIOP",
	      keyEnInput2: "ASDFGHJKL",
	      keyEnInput3: "ZXCVBNM",
	      backgroundColor: "#fff",
	      keyBoardType: 1,
	      buttonBorder: "1px solid #ccc"
	    };
	  },
	  methods: {
	    vehicleTap: function(event) {
	      console.log(event);
	      switch (event) {
	        case "delete":
	          this.$emit("delete");
	          this.$emit("inputchange",event);
	          break;
	        case "ok":
	          this.$emit("ok",this.oinp);
	          break;
	        case "exit":
	          this.$emit("exit");
	          break;
	        default:
	          this.$emit("inputchange", event);
	      }
	    },
	    colse_da() {
	      this.$emit("exit2");
	    },
	    check() {
	      if (this.keyBoardType == 1) {
	        this.keyBoardType = 2;
	      } else if (this.keyBoardType == 2) {
	        this.keyBoardType = 1;
	      }
	    }
	  }
	};
</script>
<style>
	:host {
	  width: 100%;
	}
	.panel-wrap {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  z-index: 999;
	}
	.vehicle-panel {
	  width: 100%;
	  position: fixed;
	  bottom: 0;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  z-index: 1000;
	  background: #fff;
	  padding-bottom: 68rpx;
	}
	.jik {
	  width: 60rpx;
	  height: 80rpx;
	}
	
	.vehicle-panel-row {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.vehicle-panel-row-last {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	.vehicle-panel-row-button {
	  background-color: #fff;
	  margin: 5rpx;
	  // padding: 5rpx;
	  width: 80rpx;
	  height: 80rpx;
	  text-align: center;
	  line-height: 80rpx;
	  border-radius: 10rpx;
	}
	.vehicle-panel-row-button-number {
	  background-color: #eee;
	}
	.vehicle-panel-row-button-last {
	  width: 90rpx;
	  height: 90rpx;
	  line-height: 90rpx;
	}
	.vehicle-hover {
	  background-color: #ccc;
	}
	.vehicle-panel-row-button-img {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	.vehicle-en-button-delete {
	  width: 55rpx;
	  height: 85rpx;
	}
	.vehicle-panel-ok {
	  background-color: #6a7cff;
	  color: #fff;
	  width: 150rpx;
	  height: 80rpx;
	  line-height: 80rpx;
	}
	.topItem {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  height: 100rpx;
	  /* background: #f0f0f0; */
	}
	.exit {
	  margin-right: 30rpx;
	  color: #6a7cff;
	  font-size: 28rpx;
	  display: block;
	  line-height: 50rpx;
	}
	.check {
	  margin-left: 30rpx;
	  color: #6a7cff;
	  font-size: 28rpx;
	  display: block;
	  line-height: 50rpx;
	}
</style>

carlicense.vue文件

<template>
  <div>
        <button @click="keyState = true">键盘</button>
        <keyword :isShow="keyState" @exit="exit" @inputchange="getKey" :oinp="str" @ok="confirm"/>
  </div>
</template>
<script>
  import keyword from '@/components/keyword.vue'
  export default {
    data(){
       return {
          keyState:false,
          str:""
        }
     },
	components:{
	   keyword
	},
    methods:{
        exit(){
          this.keyState = false
        },
        getKey(val){
            if (this.str.length >= 8&&val!="delete") {
              return false
            }
            if(val == 'delete'){
              this.str = this.str.slice(0, this.str.length-1)
            }else{
              this.str+=val
            } 
        },
        confirm(e){
			console.log(e);
          this.keyState = false
        },
    }
  }
</script>