Веб-сторона реализует эффект «ввода кода подтверждения» в приложении.
причина(Просто потому, что я перекинулся парой слов в WeChat...)
Два дня назад я болтал с приятелем, чтобы обсудить, как реализовать эффект ввода кода подтверждения от uber и Didi.
первая идея
план 1:
Планируется иметь ввод, а затем покрывать два сегмента строки сегментом линии с белым фоном и использовать межбуквенный интервал для управления интервалом между словами.
Однако трудно контролировать цифровое расстояние, и от него придется отказаться, если эффект будет плохим.
Сценарий 2:
Используйте метку ярлыка в качестве поля для отображения кода подтверждения,
Затем каждая метка для атрибута указывает на тот же идентификатор, что иvcodeввод,
Чтобы активировать фокус ввода, измените стиль прозрачности ввода, чтобы скрыть его.
Таким образом, щелчок по метке активирует фокус ввода и вызывает клавиатуру.
выполнить(Позже ~ наконец со слезами на глазах поняла... * *)
Наконец попробовал выбратьСценарий 2
добиться эффекта
Я думаю, что эффект курсора очень интересен, поэтому я использую егоanimateсделал это
структура
<div class="v-code">
<input type="tel" id="vcode" />
<label for="vcode"></label>
<label... * 5(取决于验证码长度 4 or 6)
</div>
стиль
Здесь опущено... Подробнееcursor-vcode
логика
Следующим шагом является осознаниеlabelиinputизvalueСоответственно, здесь зависитvueПростая реализация идеи
(vue прост в использовании, но не крут, хахаха~ 😂 😂 😂)
привязка html
<div id="app">
<div class="v-code">
<input
ref="vcode"
id="vcode"
type="tel"
maxlength="6"
v-model="code"
@focus="focused = true"
@blur="focused = false"
:disabled="telDisabled">
<label
for="vcode"
class="line"
v-for="item,index in codeLength"
:class="{'animated': focused && cursorIndex === index}"
v-text="codeArr[index]"
>
</label>
</div>
</div>
javascript
var app = new Vue({
el: '#app',
data: {
code: '', // input value
codeLength: 6, // 验证码长度
telDisabled: false, // 判断是否输入完
focused: false // 让input焦点, 决定光标显示所在的位置
},
computed: {
codeArr() {
// 将 input value 分隔数组 [1, 2, 3]
return this.code.split('')
},
cursorIndex() {
// 判断code输入长度，光标显示在对应label上
return this.code.length
}
},
watch: {
code(newVal) {
//限制 非数字
this.code = newVal.replace(/[^\d]/g,'')
if (newVal.length > 5) {
// 禁用 input && 失去焦点 让键盘消失
this.telDisabled = true
this.$refs.vcode.blur()
// submit !!!
setTimeout(() => {
alert(`vcode: ${this.code}`)
}, 500)
}
}
},
mounted() {}
})
Учитывая взаимодействие, я сделал в нем некоторые детали и ограничения, и потихоньку пробую на вкус~