caiyunyi/components/keyboard.vue

<template lang="">
	<div>
    <div class='panel-wrap'  v-if="isShow" data-value="exit"  @tap='colse_da'>
			<div class="vehicle-panel" :style="{background:backgroundColor,height:'472rpx'}">
				<!-- height:'500rpx'; -->
				<div class='topItem'>
					<!-- <span class='check'  @tap='check'>中/英</span>
					<span class='contentShow'>{{oinp}}</span> -->
					<span class='exit' @tap='vehicleTap("ok")'>完成</span>
				</div>
				<!--省份简写键盘-->
				<div v-if="keyBoardType === 1">
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle1" @tap='vehicleTap(item)' :key="idx">{{item}}</div>
					</div>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle2" @tap='vehicleTap(item)'  :key="idx">{{item}}</div>
					</div>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyVehicle3" @tap='vehicleTap(item)'  :key="idx">
							{{item}}
						</div>
					</div>
				
					<div class="vehicle-panel-row-last">
						<div  class='vehicle-panel-row-button vehicle-panel-row-button-img' @tap="check">
							ABC
						</div>
						<div class='vehicle-panel-row-button vehicle-panel-row-button-last' @tap='vehicleTap(item)'  v-for="(item,idx) in keyVehicle4" 	:key="idx">
							{{item}}
						</div>
						<div  class='vehicle-panel-row-button vehicle-panel-row-button-img'>
							<img src='/static/images/keyboard-delete.svg' class='vehicle-en-button-delete' @tap='vehicleTap("delete")' mode='aspectFit'>
						</div>
					</div>
				</div>
				<!--英文键盘  -->
				<div v-else>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button ' @tap='vehicleTap(item)' v-for="(item,idx) in keyNumber" 
							:key="idx">{{item}}</div>
					</div>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyEnInput1" @tap='vehicleTap(item)' :key="idx" :class="{'vehicle-panel-row-button-number':item==='I'|| item==='O'}" >{{item}}</div>
					</div>
					<div class="vehicle-panel-row">
						<div class='vehicle-panel-row-button' v-for="(item,idx) in keyEnInput2" @tap='vehicleTap(item)' :key="idx">{{item}}</div>
					
					</div>
					<div class="vehicle-panel-row-last">
						<div   class='vehicle-panel-row-button vehicle-panel-row-button-img' @tap="check">
							省份
						</div>
						<div class='vehicle-panel-row-button vehicle-panel-row-button-last' @tap='vehicleTap(item)' v-for="(item,idx) in keyEnInput3"
							:key="idx">
							{{item}}
						</div>

						<div  class='vehicle-panel-row-button vehicle-panel-row-button-img'>
							<img src='/static/images/keyboard-delete.svg' class='vehicle-en-button-delete' @tap='vehicleTap("delete")' mode='aspectFit'>
						</div>
						<!-- <div :style="{border:buttonBorder}" class='vehicle-panel-row-button vehicle-panel-ok' @tap='vehicleTap("ok")' >确定</div> -->
					</div>
				</div>
			</div>
		</div>
	</div>

</template>
<script>
	export default {
	  props: {
	    isShow: false,
	    oinp: ''
	  },
	  data () {
	    return {
	      keyVehicle1: ['陕', '京', '津', '沪', '冀', '豫', '云', '辽', '吉', '黑'],
	      keyVehicle2: ['湘', '皖', '鲁', '苏', '浙', '赣', '甘', '晋', '蒙', '闽'],
	      keyVehicle3: ['鄂', '桂', '粤', '川', '青', '藏', '琼', '宁', '贵', '渝'],
	      keyVehicle4: ['新', '使', '领', '警', '学', '港', '澳'],
	      keyNumber: '1234567890',
	      keyEnInput1: 'QWERTYUIOP',
	      keyEnInput2: 'ASDFGHJKL',
	      keyEnInput3: 'ZXCVBNM',
	      backgroundColor: '#cfd5dc',
	      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')
	          break
	        case 'exit':
	          this.$emit('exit')
	          break
	        default:
	          if (event === 'I' || event === 'O') {
	            return
          }
	          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 scoped>
	:host {
		width: 100%;
	}
	.bgf7 {
		background: #fefefe;
	}
	/* .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: 28rpx;
	}
	.jik {
		width: 0.6rem;
		height: 0.8rem;
	}

	.vehicle-panel-row {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.vehicle-panel-row-last {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.vehicle-panel-row-button {
		background-color: #fff;
		margin: 7rpx 5rpx;
		font-size: 32rpx;
		width: 60rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 10rpx;
		box-shadow:  0 2rpx 4rpx #7f7f7f;
	}
	.vehicle-panel-row-button-number {
		background-color: #eee;
		box-shadow: none;
	}
	/* .vehicle-panel-row-button-last {
		width: 0.9rem;
		height: 0.9rem;
		line-height: 0.9rem;
	} */
	.vehicle-hover {
		background-color: #ccc;
	}
	.vehicle-panel-row-button-img {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 96rpx;
		background: #acb3bd;
		font-size: 28rpx;
		box-shadow:  0 2rpx 4rpx #acb3bd;
	}
	.vehicle-en-button-delete {
		width: 52rpx;;
		height: 80rpx;
	}
	.vehicle-panel-ok {
		background-color: #6a7cff;
		color: #fff;
		width: 1.5rem;
		height: 0.8rem;
		line-height: 0.8rem;
	}
	.topItem {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 80rpx;
		/* background: #f0f0f0; */
	}
	.exit {
		margin-right: 30rpx;
		color: #000;
		font-size: 28rpx;
		display: block;
		line-height: 0.5rem;
	}
	.check {
		margin-left: 0.3rem;
		color: #6a7cff;
		font-size: 0.28rem;
		display: block;
		line-height: 0.5rem;
	}
</style>