短信验证框

验证框

业务需求如下，这是个企业激活码和短信验证码类似

使用技术栈 是 vue3 + element plus

HTML 代码如下

  <div>
   <div class="key-text">企业激活码</div>
    <div class="login-box-key" @click="clickInputBox">
      <div v-for="(item, index) in 6">
        <div>{{ inputValue[index] }}</div>
      </div>
    </div>
    <el-input ref="ipt" class="input-code" v-model.trim="inputValue" maxlength="6"/>
  </div>

Js 代码

import { defineComponent, ref， nextTick } from 'vue'

export default defineComponent({
	setup() {
		let inputValue = ref('')
		const ipt = ref(null)
		// 点击div 聚焦
		const clickInputBox = () => {
			nextTick(() => {
				ipt.value.focus()
			})
		}
	}
})

CSS input 样式

      .input-code {
        position: absolute;
        left: -9999px;
        top: -99999px;
        width: 0;
        height: 0;
        opacity: 0;
        overflow: visible;
        z-index: -1;
      }

结果