【uniapp 单个文字输入框（方格单字输入）】

uniapp VUE 单个文字输入框（微信小程序）

公司需求单个文字输入，在输入框中手动输入指定文字。

「类似作文稿单字输入，类似密码输入框，可输入文字」
设计思路（布局方式相对布局）：
1、首先，创建一个输入框，使输入框的宽度大于屏幕宽度，输入框局右布局，即有左边部分超出屏幕。然后设置输入框的padding-right=‘屏幕宽度’，这样每次点击输入框都可以使输入的内容又可以使光标聚焦做输入框的最右边（删除时即可从右向左删除）。
2、其次，在当前的布局上创建单框输入的布局，设置布局被点击时输入框获取焦点，然后将输入框输入的内容绑定在单框输入的布局上。
3、最后，注意将输入框样式隐藏

效果图：

1. 创建一个输入框

   <!-- input输入框 -->
   <input  style="position: absolute; width: 90%; padding-right: 750rpx; right: 0rpx;" class="input-item" v-if="focus" adjust-position="false" auto-blur="true" 
   				@input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" @blur="inputCodeBlur"
   				maxlength="9" />
   

   focusClick()方法用于聚焦

2. 在输入框上面添加单个字输入UI

   <!-- 单个字输入框 -->
   <view style="position: absolute;" class="code-list" @click="focusClick">
   	<view class="code-item" v-for="(item,index) in 9" :key="index" :style="(index == code.length && focus ? 'border-color:#3c9cff;':'')">{{code[index]}}</view>
   </view>
   

   focusClick()方法用于聚焦

3. 整体代码如下

   <template>
   	<view class="index">
   		<view class="content">
   			<view class="phone-item">
   				<!-- 手机号输入框 -->
   				<input type="number" class="phone-input" v-model="phone" placeholder="请输入手机号">
   				<!-- 发送验证码按钮 -->
   				<view class="get-code" @click="getCode" v-if="codeBtn.isCode || codeBtn.codeNumber == 0">{{codeBtn.codeName}} </view>
   				<view class="get-code" v-else>{{codeBtn.codeNumber}}s</view>
   			</view>
   			
   			<view class="input-list" style="position: relative; margin-top: 40rpx; height: 400rpx;">
   				<!-- input输入框 -->
   				<input  style="position: absolute; width: 90%; padding-right: 750rpx; right: 0rpx;" class="input-item" v-if="focus" adjust-position="false" auto-blur="true" 
   					@input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" @blur="inputCodeBlur"
   					maxlength="9" />
   				<!-- 验证码输入框 -->
   				<view style="position: absolute;" class="code-list" @click="focusClick">
   					<view class="code-item" v-for="(item,index) in 9" :key="index" :style="(index == code.length && focus ? 'border-color:#3c9cff;':'')">{{code[index]}}</view>
   				</view>
   			</view>
   		</view>
   	</view>
   </template>
   
   <script>
   	export default {
   		data() {
   			return {
   				phone: '', // 手机号
   				timer: null, // 定时器
   				codeBtn: { // 按钮状态切换
   					codeName: '获取验证码', // 状态名称
   					codeNumber: 2, // 倒计时秒数
   					isCode: true // 是否获取验证码
   				},
   				code: '', // 验证码字段
   				focus: false, // input是否聚焦
   			}
   		},
   		watch: {
   			// 监听倒计时
   			'codeBtn.codeNumber': {
   				handler(val) {
   					// 这里监听用户输入完完整的验证码，去调接口验证。
   					if (val == 0) {
   						this.codeBtn.codeName = '重新获取'
   						clearInterval(this.timer)
   					}
   				}
   			}
   		},
   		methods: {
   			// 获取验证码
   			getCode() {
   				this.codeBtn.isCode = false
   				this.codeBtn.codeNumber = 2
   				this.timer = setInterval(() => {
   					if (this.codeBtn.codeNumber == 0) {
   						clearInterval(this.timer)
   						return
   					}
   					this.codeBtn.codeNumber--
   				}, 1000)
   			},
   			// 点击聚焦输入框
   			focusClick() {
   				this.focus = true
   			},
   			// 输入框失去焦点
   			inputCodeBlur(e) {
   				let value = e.detail.value
   				this.focus = false
   			},
   			// 输入框聚焦时触发（没用到）
   			inputFocus(e, height) {
   				console.log(e)
   			},
   			// 输入框内容变化事件
   			inputCode(e) {
   				console.log('------->', e)
   				let value = e.detail.value
   				this.code = value
   			},
   		}
   	}
   </script>
   
   <style lang="scss" scoped>
   	.index {
   		padding: 30rpx;
   
   		.content {
   
   			.phone-item {
   				display: flex;
   				justify-content: space-between;
   				align-items: center;
   				margin-bottom: 30rpx;
   
   				.phone-input {
   					width: calc(100% - 240rpx);
   					padding: 16rpx;
   					border-bottom: 1rpx solid #eee;
   				}
   
   				.get-code {
   					text-align: center;
   					width: 170rpx;
   					font-size: 26rpx;
   					border-radius: 50rpx;
   					padding: 10rpx 0rpx;
   					background: #3c9cff;
   					color: #fff;
   				}
   			}
   
   			.input-list {
   				position: relative; 
   				margin-top: 40rpx;
   
   				.input-item {
   					position: absolute; 
   					width: 90%; 
   					padding-right: 750rpx; //出入框向左偏移出屏幕并且每次点击焦点最右边
   					right: 0rpx;
   				}
   
   				.code-list {
   					width: 100%;
   					display: flex;
   					align-items: center;
   					justify-content: space-between;
   					// flex-flow:row wrap;
   
   					.code-item {
   						width: 70rpx;
   						height: 70rpx;
   						text-align: center;
   						line-height: 70rpx;
   						border: 1rpx solid #eee;
   						margin: 2rpx;
   						border-radius: 10rpx;
   					}
   				}
   			}
   		}
   	}
   </style>
   
   

个人使用的小小心得，有什么不妥的地方请多指教，如对您有帮助都就会转换成我的动力！