自定义键盘组件

keyword.vue：全部代码

Markup

<template>
    <view>
		<view class='panel-wrap'  v-if="isShow" data-value="exit"  @click='colse_da'>
		  <view class="vehicle-panel" :style="{background:backgroundColor}">
			 <!-- height:'500rpx'; -->
			 <!-- 头 -->
			  <view class='topItem'>
					<text class='check'  @click='check'><text :class="[isBig ? 'big' : '']">中</text>/<text :class="[!isBig ? 'big' : '']">英</text></text>
					<text class='contentShow'>{{oinp}}</text>
					<text class='exit' @click='vehicleTap("exit")'>取消</text>
			  </view>
			  
			  <!--省份简写键盘-->
			  <view v-if="keyBoardType === 1">
					<view class="vehicle-panel-row">
					  <view    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle1" @click='vehicleTap(item)' :key="item">{{item}}</view>
					</view>
					<view class="vehicle-panel-row">
					  <view    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle2" @click='vehicleTap(item)'  :key="item">{{item}}</view>
					</view>
					<view class="vehicle-panel-row">
					  <view    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle3" @click='vehicleTap(item)'  :key="item">
						 {{item}}
					  </view>
					  <view  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
						   <img src='../../static/icon/check/delet.png' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
					   </view>
					</view>
				   
					<view class="vehicle-panel-row-last">
						  <view  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}}</view>
					</view>
			  </view>
			  
			  <!--英文键盘  -->
			  <view v-else>
					<view class="vehicle-panel-row">
						  <view    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}}</view>
					</view>
					<view class="vehicle-panel-row">
						<view  class='vehicle-panel-row-button' 
						:style="{border:buttonBorder}" 
						v-for="(item,idx) in keyEnInput1" 
						@click='vehicleTap(item)'   
						:key="item">{{item}}</view>
					</view>
					<view class="vehicle-panel-row">
					  <view class='vehicle-panel-row-button' 
					  :style="{border:buttonBorder}"  
					  v-for="(item,idx) in keyEnInput2" 
					  @click='vehicleTap(item)'   
					  :key="item">{{item}}</view>
					  <view  :style="{border:buttonBorder}" class='vehicle-panel-row-button vehicle-panel-row-button-img'>
						<img src='../../static/icon/check/delet.png' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
					  </view>
					</view>
					<view class="vehicle-panel-row-last">
				    <view
					  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}}</view>
				  
					<view  
					  :style="{border:buttonBorder}" 
					  class='vehicle-panel-row-button vehicle-panel-ok'
					  @click='vehicleTap("ok")' >确定</view>
				</view>
				
			
			  
		</view>
		  </view>
        </view>
    </view>
</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",
		  isBig:true
	    };
	  },
      computed:{
		show(){
			if(this.isShow == true){
				let tabHide = !this.isShow
				this.$emit("tabHide",tabHide);
				console.log('键盘出现了');
			}else{
				let tabHide = !this.isShow
				this.$emit("tabHide",tabHide);
				console.log('键盘退出');
			}
		}  
	  },
	  methods: {
	    vehicleTap: function(event) {
	      console.log(event);
	      switch (event) {
	        case "delete":
	          this.$emit("delete");
	          this.$emit("inputchange",event);
	          break;
	        case "ok":    
			  const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
              if (reg.test(this.oinp)) {
				  this.$emit("ok",this.oinp);
              } else {

				uni.showModal({
					title: '提示',
					content: '请输入合法的车牌号',
					showCancel: false
				})
              }
	          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;
	      }
		  this.isBig = !this.isBig
	    }
	  }
	};
</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: 9999;
	}
	.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;
	}
	.big{
		font-size: 32rpx;
	}
</style>

引用的页面：

Markup

method:

Markup

pickKeyword(){
			this.keyState  = true
		},
		scroll(e) {
			console.log(e)
		            // this.old.scrollTop = e.detail.scrollTop
		},
		exit(){
		  this.keyState = false
		},
		getKey(val){
			if (this.postData.licplate.length >= 8&&val!="delete") {
			  return false
			}
			if(val == 'delete'){
			  this.postData.licplate = this.postData.licplate.slice(0, this.postData.licplate.length-1)
			}else{
			  this.postData.licplate += val
			} 
			this.textList = [...this.postData.licplate]
			console.log('this.str',this.postData.licplate);
		},
		confirm(e){
			console.log(e);
		  this.keyState = false