이 문서는 재현 원숭이 2048 웹 사이트 ⇨ https://www.mk2048.com/blog/blog.php?id=hc0c1iiccb
효과
도 물결 효과 완전한에게 처음 봐
수요
4 또는 6 번 위치의 입력 메시지 인증 코드를 상기 키보드 입력이 완료 축소 인
구현 단계
첫 번째 단계
레이아웃 레이아웃
<div class="security-code-wrap">
<label for="code">
<ul class="security-code-container">
<li class="field-wrap" v-for="(item, index) in number" :key="index">
<i class="char-field">{{value[index] || placeholder}}</i>
</li>
</ul>
</label>
<input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
id="code" name="code" type="tel" :maxlength="number"
autocorrect="off" autocomplete="off" autocapitalize="off">
</div>
- 입력 상자를 시뮬레이션하는 데 사용하는 리튬 요소는 의미로, 물론, 당신은 또한, 예를 들어, DIV를 시뮬레이션하기 위해 다른 요소를 사용할 수 있습니다, 다른 목적을 표시되지 않습니다.
- 라벨 태그를 사용의 장점은 그것이 의미 솔루션을 달성하기 위해 한편으로는 클릭 이벤트 입력과 연관 될 수 있다는 것을, 그것은 또한 우리가 JS에 의해 가상 키보드를 연상 할 필요가 없습니다 것입니다.
숨겨진 입력 상자
.input-code {
position: absolute;
left: -9999px;
top: -9999px;
}
- 가상 키보드가 자극되고, 화면의 가시 영역 외부에 위치 실제 입력 상자는 페이지의 상단이 아닐 것입니다. 그래서 인증 코드 입력 구성 요소는 어디에 차단 할 수없는 가상 키보드 배치해야합니다.
두번째 단계
처리 입력 코드
handleSubmit () {
this.$emit('input', this.value)
},
handleInput (e) {
if (e.target.value.length >= this.length) {
this.hideKeyboard()
}
this.handleSubmit()
}
- 입력은 할당 재 집속 후, 마지막에 표시되는 커서의 위치를, 제 세트의 앞에 입력 커서를 재조명 후방 프레임 로이드 디 포커스 입력단를 해결하기 위해, 입력 값 상자를 할당 뒤에.
세 번째 단계
일단 가까운 가상 키보드를 완료
hideKeyboard() {
// 输入完成隐藏键盘
document.activeElement.blur() // ios隐藏键盘
this.$refs.input.blur() // android隐藏键盘
}
구성 요소 전체 코드
<template>
<div class="security-code-wrap">
<label :for="`code-${uuid}`">
<ul :class="`${theme}-container security-code-container`">
<li class="field-wrap" v-for="(item, index) in length" :key="index">
<i class="char-field">{{value[index] || placeholder}}</i>
</li>
</ul>
</label>
<input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
:id="`code-${uuid}`" :name="`code-${uuid}`" type="tel" :maxlength="length"
autocorrect="off" autocomplete="off" autocapitalize="off">
</div>
</template>
<script>
export default {
name: 'SecurityCode',
// component properties
props: {
length: {
type: Number,
default: 4
},
placeholder: {
type: String,
default: '-'
},
theme: {
type: String,
default: 'block'
}
},
// variables
data () {
return {
value: ''
}
},
computed: {
uuid () {
return Math.random().toString(36).substring(3, 8)
}
},
methods: {
hideKeyboard () {
// 输入完成隐藏键盘
document.activeElement.blur() // ios隐藏键盘
this.$refs.input.blur() // android隐藏键盘
},
handleSubmit () {
this.$emit('input', this.value)
},
handleInput (e) {
if (e.target.value.length >= this.length) {
this.hideKeyboard()
}
this.handleSubmit()
}
}
}
</script>
<style scoped lang="less">
.security-code-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.security-code-container {
margin: 0;
padding: 0;
display: flex;
.field-wrap {
list-style: none;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
font-size: 16px;
.char-field {
font-style: normal;
}
}
}
.block-container {
justify-content: center;
.field-wrap {
background-color: #fff;
margin: 2px;
color: #000;
}
}
.line-container {
position: relative;
background-color: #fff;
&:after {
box-sizing: border-box;
content: "";
width: 200%;
height: 200%;
transform: scale(.5);
position: absolute;
border: 1px solid #d9d9d9;
top: 0;
left: 0;
transform-origin: 0 0;
border-radius: 4px;
}
.field-wrap {
flex: 1;
position: relative;
&:not(:last-child):after {
content: "";
width: 1px;
height: 50%;
position: absolute;
right: 0;
top: 25%;
background-color: #d9d9d9;
transform: scaleX(.5);
}
}
}
.input-code {
position: absolute;
left: -9999px;
top: -9999px;
}
</style>
코드 구성 요소를 사용하여
<security-code v-model="code"></security-code>
결론
어떻게 종류, 484 너무 쉽게
아이디어는 이러한 접근 방식은 목적을 달성 할 수있는, 전체 모니터가 다음 입력 상자로 이동 입력,하지만 규칙이 아닌 우아함을 유지하기 위해 더 많은 코드를 필요로, 네 개의 입력 상자의 시작입니다.
현재의 관행은 당신이 아이디어의 더 나은 실현을 경우 가장 좋은 방법을 생각뿐만 아니라 날개를 희망 할 수있다.