uniapp实现六个格子输入框

本文介绍两种方法

第一种：用一个input加上六个span

<template>
	<view class="content">
		  <view class="pc_in">
				<view class="pc_on">
					<span class="g_hx"></span>
					<span class="g_hx"></span>
					<span class="g_hx"></span>
					<span class="g_hx"></span>
					<span class="g_hx"></span>
					<span class="g_hx"></span>
				</view>
				<p class="pp">
					<input :class="smsCode.length==6 ? 'input current' : 'input'" type="number" maxlength="6" v-model="smsCode" />
				</p>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
.pc_in {
		position: relative;
		height: 60upx;
		line-height: 60upx;
		width: 70%;
		margin: 30upx auto 0;
	}
	.pc_on {
		display: flex;
		height: 60upx;
		line-height: 60upx;
	}
	.g_hx {
		flex: 1;
		border: #E6E8ED solid 4upx;
		border-radius: 10upx;
		margin: 0 10upx;
	}
	.pp {
		position: absolute;
		width: 120%;
		height: 60upx;
		line-height: 60upx;
		top: 0;
		left: 0;
		background: none;
		overflow: hidden;
	}
	.input {
		font-family: '';
		font-size: 30upx;
		width: 120%;
		height: 60upx;
		line-height: 60upx;
		letter-spacing: 70upx;
		background: none;
		text-align: left;
		text-indent: 34upx;
	}
	.input.current{
		caret-color: transparent;
	}
</style>

效果展示

第二种：不用input，自定义键盘
首先创建number-keyboard.vue组件

<template>
  <view :class="['KeyboarBody','bottomMove', 'bodMove', bodMove]" v-if="KeyboarHid">
    <view class="KeyboarBx">
      <view v-for="(num , index) in keyboardNum " :key='index'@tap.stop="" @touchstart="clickBoard(num[0])" hover-class="hover"
        :hover-stay-time='20' class="keyboar">
		<view class="">
			<view>{{num[0]}}</view>
			<view style="font-size: 16upx;">{{num[1]}}</view>
		</view>
      </view>
      <view @tap.stop="" class="keyboar empty" > </view>
      <view @tap.stop="" @touchstart="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar zero">0</view>
      <view @tap.stop="" @touchstart="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
        <view class="keyboarDel"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	props: {
		//限制输入框的长度 空值不限制
		psdLength: {
			type: [Number, String],
			default: ''
		},
		//键盘码
		keyboardNum: {
			type: [Array, Object],
			default: () => {
				return [[1], [2,'ABC'], [3,'DEF'], [4,'GHI'], [5,'JKL'], [6,'MNO'], [7,'PQRS'], [8,'TUV'], [9,'WXYZ']]
			},
			
		},
		value: {
			type: String,
			default: ''
		}
    },
    data() {
		return {
			bodMove: '',
			password: '', //要返回的结果
			iptNum: [], //输入的内容
			KeyboarHid: false, //键盘影藏和显示
		}
	},
	watch: {
		iptNum(newVal, oldVal) {
			this.$emit('input', newVal.join(''))
		},
		value(newVal, oldVal) {
			this.iptNum = newVal.split('')
		}
	},
    methods: {
		open() {
			this.KeyboarHid = true;
			if (this.tabBar) {
				uni.hideTabBar()
			}
			this.$nextTick(() => {
				setTimeout(() => {
					this.bodMove = 'moveShow'
				}, 30)
			})
		},
		close() {
			if (this.tabBar) {
				uni.showTabBar()
			}
			this.bodMove = '';
			this.$nextTick(() => {
				setTimeout(() => {
					this.KeyboarHid = false
				}, 300)
			})
		},
		// 点击键盘
		clickBoard(num) {
			if (num == '') return;
			let iptNum = this.iptNum.filter(item => item != '');
			//判断是否限制长度
			if (this.psdLength != '') {
				if (iptNum.length >= this.psdLength) {
					return
				};
				this.iptNum.push(num);
			} else {
				this.iptNum.push(num);
			}
		},
		//重置 清空
		reset() {
			this.iptNum = [];
		},
		//删除
		deleteKeyboar() {
			this.iptNum.pop();
		}
	}
}
</script>

<style scoped>
  .bodMove {
    transition: all .3s
  }

  .bottomMove {
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%)
  }

  .moveShow {
    transform: translateY(0)
  }

  .KeyboarBody {
    position: fixed;
    bottom: 70upx;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #fcfcfc;
	width: 90%;
	margin: 0 auto;
  }

  .KeyboarBx {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding: 10rpx 6rpx 0rpx 6rpx;
    margin-left: -12rpx;
  }

  .keyboar {
    width: 30%;
    flex-grow: 1;
    padding: 2upx 20upx;
    font-size: 40rpx;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    margin-left: 12rpx;
    margin-bottom: 16rpx;
	min-height: 74upx;
	box-shadow: 0px 1px 1px #000;
  }
  .keyboar.zero{
	  line-height: 74upx;
  }

  .dian {
    margin-top: -10rpx;
  }

  .keyboarBtn {
    background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
    color: #fff;
  }

  .hover {
    background: #ebedf0;
  }


  .bot {
    bottom: 0;
  }

  .empty {
    box-shadow: none;
	background-color: #fcfcfc;
  }

  .dowmImgBx {
    display: flex;
    justify-content: center;
    border-top: 1rpx solid A1A1A1;
  }

  .dowmImg {
    width: 35rpx;
    height: 35rpx;
    margin-bottom: 10rpx;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACT0lEQVRYR+2UPWgTYRjH/8/dpdZCpVhU/BoEB8FBEBFt7tJe7i5CbAXhrg6CQ8HBQXAQHBzq5CA4CA4OgoNgr0GQIhQTUkJqCPEDBEEQBAdBQSoVlIakXvLIofmopMnlizjkxuN9nt/v/b/v+xB6/FGP+egL9BPoJ/D/JLC8/Hp33sl9AXDOCMqRbsyH6NLzGwLR7BapuDMQCKy4jHICi5nMNinrpAk4DOC8EZQfdVKiBGemxyHNb5V6bziCaDRxSPT5bAaOCAJd0Cb8DzshUYIT4cnqit+anqZCTQH357NE+qDIhXmAjoJpxtD8D9qRqOwcT538DyscDuer+9W8hNFo8oDok2wGHxcIFzVVvt+KRAkOYDG3NmhNTR3L/ttn01eQTL7cv+6sz4NwkhmXQpp8rxmJ8s6B2NAATFmWf9aqr/sMY7HUHsEHmxkKGJcNTb7rRaKyc1rKZ4vW5KTyfbO6hnMgHo/vYmHQBjBBxFd0VblTT6IC56REjqmq6rd66xsKuMXx+ItRFn/ZYOhMfDWkKrdrNa068xQVJVPXT3xtlJgnAbdJIpEYcViyATpFoGt60H+runkVPCOwYGra2OdG8A2DyMvihYXU8NAwzQF8moDrelC+6daV4YRXcNg0DOWTl35NC7gF6XR661qu6N6JMwzMMrPgjlcw3hCzqevKR6/wlgTcokjk3cDI6KpNRGf/wt6yWDBD4+MfmoG3LPBHIiJu37F3jsH7JAgzqjr2vll4WwKtwJoeRJ2CtD0HuinieQ50S6Iv0E+g5wn8Bo+vyyFXaYw2AAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
  }

  .keyboarDel {
    width: 50rpx;
    height: 36rpx;
    margin-bottom: 10rpx;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABMklEQVQ4T62UbVFDMRBFTx0gAQdFAihocQAKAAc4aKugRUFxUHAACgAHdUDnzLzthL68lx0gP/NxT3LvbiaMj0vgDpg39pXLn8AGWAH7ycjBG2ANvALPwFsCcgZ4Kc9+AFdDgBB/6jYntH9sEeRLljXAX8WDtARmp4D/EhdibtsS0BI/BxbAreEVhmiHWT10tsSSWewC0BL3kEIvwLfhdRDndoA6CpbgIyAjHrcqIddaMCDu/iNAqmUoKDMCMgXeKzfvWSTAm+htZoQtF11vhF2nZ3sW2X0tSOm5VeLLy0xKSDXkMUgt0Frw1SpyMsIeglimj8B9pUxtKtfs3kFABpLJKPb0Gi0WWi/JQnzVvPXZZYKvAa0wG3CV+a7t3t9811/2yBggutFQZ1lfAIV9uRbtD3WVXOgkzB+KAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
    margin-top: 11rpx;
  }

  .keyboarflex {
    display: flex;
    justify-content: center;
    align-items: center;
	box-shadow: none;
  }
</style>

在页面中引入

<template>
	<view class="page container" @click="KeyboarClose">
			<view class="right" @tap.stop='KeyboarOpen' data-key='1'>
				<view class="psdIptBx">
				  <block v-for="(item , index) in 6" :key='index'>
					<view class="psdTtem">
					  <text class="psdTtemTxt">
						<text>{{valArr.val[index]}}</text>
					  </text>
					  <text v-if="valArr.val.length == index && isFoucs" class="focus_move">|</text>
					</view>
				  </block>
				</view>
			</view>
			<numberKeyboard tabBar ref='KeyboarHid' @input='clickInput' :psdLength='valArr.length'></numberKeyboard>
	</view>
</template>
<script>
	import numberKeyboard from '@/components/input-number-keyboard/number-keyboard.vue'
	export default{
		components: {
			numberKeyboard
		},
		data(){
			return {
				smsCode: '',
				valArr: {
					val: '',
					length: 6
				},
				isFoucs: false
			}
		},
		methods: {
			//打开键盘
			KeyboarOpen(e) {
				this.$refs.KeyboarHid.open()
				this.isFoucs = true
			},
			//输入的值
			clickInput(val) {
				this.valArr.val = val
				this.smsCode = val
			},
			KeyboarClose(e) {
				this.$refs.KeyboarHid.close();
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import 'login-new.scss';
	.psdIptBx {
	  display: flex;
	  width: 70%;
	  text-align: center;
	  margin: 20upx auto 0;
	  font-family: '';
	}
	
	.psdTtem {
		flex: 1;
		height: 60rpx;
		border: 2px solid #ccc;
		line-height: 1;
		border-radius: 10upx;
		margin: 0 10upx;
	}
	
	.psdTtemTxt {
	  text-align: center;
	  line-height: 54upx;
	  font-size: 34upx;
	}
	
	.focus_move {
	  color: #666;
	  animation: focus 1s infinite;
	}
	
	@keyframes focus {
	  from {
	    opacity: 1;
	  }
	
	  to {
	    opacity: 0;
	  }
	}
</style>

效果展示