vue实现验证码输入

需求：这种样式的验证码输入，进入页面时光标停留在第一个格子，随着输入的数字向后移动。
实现逻辑：
①首先考虑样式，将六个格子及获取光标的样式写出来。
②需要一个input框作为输入，所以在页面上加input框，并且隐藏。
③进入页面时获取input的焦点，并监听input的值，输入一个值页面格子的光标向后移。input内容删除时 光标向前。根据下 标给样式。
逻辑差不多这样，可以自己尝试写一下！
实现代码： css没有放 根据各自的需求改哈

			html部分
			<view class="list" ref="list">
					<input type="number" auto-focus :focus="focus" @input="setOldPass" class="input" @focus="onFocus"
						v-model.trim="oldPassword" />
					<view v-for="(item,index) in oldPassArr" :key="index" :class="[index==inx?'color':'','lists'] ">
						{{item}}
					</view>
				</view>
			js部分
			export default {
				data() {
					return {
						oldPassArr: ['', '', '', '', '', ''],
						oldPassword: '',
						inx: 0,
						focus: false,
					}
				},
				mounted() {
					this.focus = true
				},
				methods: {
					setOldPass(e) {
						this.value = e.detail.value;
						let n = e.detail.value.split('');
						let that = this
						this.oldPassword = this.oldPassword.slice(0, 6)
						if (n) {
							let i;
							for (i = 0; i < 6; i++) {
								if (n[i]) {
									this.oldPassArr[i] = n[i]
								} else {
									this.oldPassArr[i] = ''
								}
							}
							this.inx = n.length
							if (n.length == 6) {
								this.focus = false
								return;
							}
						} else {
		
						}
					},
					onFocus() {
						this.inx = this.oldPassword.length
					},
				}