全網最簡單的驗證碼輸入框

2022-09-22 18:28:30 字數 636 閱讀 6940

先上圖

要實現一個類似於這樣的輸入框,而且有幾個頁面都需要類似的輸入框(輸入身份證後四位/輸入支付密碼),就準備擼一個小元件。

# 原理

在一個輸入框中輸入一串字串,然後根據下標index分別填入框裡,為了**的可讀性,我這裡框就用ul,li來寫

## 子元件

for="code">

class="code-input"v-model="code":maxlength="length"type="number"id="code"@keyup.13="next()"

/>

## 父元件

# 注意點

1.label屬性:html的label屬性可以根據input的id擴大input的點選面積。

2.@keyup.13="next()":這一句是指手機鍵盤的回車/確定/前進鍵觸發 的事件

3.子元件input的位置:我是通過絕對定位使他不在我可視位置上,不能讓他display:none