vue 키보드 입력 지불 암호 기능 실현
결제 암호 기능 인터페이스 아래 그림:
주요 코드 는 다음 과 같 습 니 다.
<template>
<div class="pay-tool">
<div class="pay-tool-title border-bottom">
<span class="icon icon-back" @click="backHandle"></span><strong> </strong>
</div>
<div class="pay-tool-content">
<div class="pay-tool-inputs">
<div class="item" v-for="i in items"><span class="icon_dot" v-if="password[i]"></span></div>
</div>
<div class="pay-tool-link"><router-link class="link" to="/getP"> ?</router-link></div>
</div>
<div class="pay-tool-keyboard">
<ul>
<li @click="keyUpHandle($event)" v-for="val in keys">
{{ val }}
</li>
<li class="del" @click="delHandle"><span class="icon-del"><</span></li>
</ul>
</div>
</div>
</template>
<script>
const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, '', 0]
// let sendFlag = true //
export default {
data () {
return {
items: [0, 1, 2, 3, 4, 5],
keys: keys(),
password: []
}
},
methods: {
backHandle () {
this.clearPasswordHandle() // password
this.$emit('backFnc') //
},
keyUpHandle (e) {
let text = e.currentTarget.innerText
let len = this.password.length
if (!text || len >= 6) return
this.password.push(text)
this.ajaxData()
},
delHandle () {
if (this.password.length <= 0) return false
this.password.shift()
},
ajaxData () {
if (this.password.length >= 6) {
console.log(parseInt(this.password.join(' ').replace(/\s/g, '')))
}
return false
},
clearPasswordHandle: function () {
this.password = []
}
}
}
</script>
<style lang="less" scoped>
.pay-tool {
position: relative;
height: 18.93333333rem;
background-color: #fff;
overflow: hidden;
&-title {
width: 100%;
height: 2.08888888rem;
padding: 0 0.8rem;
line-height: 2.08888888rem;
text-align: center;
overflow: hidden;
.icon {
float: left;
margin-top: 0.72222222rem;
}
strong {
font-size: 0.8rem;
}
}
&-content {
.pay-tool-inputs {
width: 14.46666666rem;
height: 2.31111111rem;
margin: 1.28888888rem auto 0;
border: 1px solid #b9b9b9;
border-radius: 0.26666666rem;
box-shadow: 0 0 1px #e6e6e6;
display: flex;
.item {
width: 16.66666666%;
height: 2.31111111rem;
border-right: 1px solid #b9b9b9;
line-height: 2.31111111rem;
text-align: center;
&:last-child {
border-right: none;
}
.icon_dot {
display: inline-block;
width: 0.51111111rem;
height: 0.51111111rem;
background: url("../../assets/images/icon_dot.png") no-repeat;
background-size: cover;
}
}
}
.pay-tool-link {
padding: 0.53333333rem 0.8rem 0;
text-align: right;
.link {
font-size: 0.66666666rem;
color: #3c8cfb;
}
}
}
.pay-tool-keyboard {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
ul {
width: 100%;
display: flex;
flex-wrap: wrap;
li {
width: 33.3333%;
height: 2.25442834rem;
line-height: 2.25442834rem;
text-align: center;
border-right: 1px solid #aeaeae;
border-bottom: 1px solid #aeaeae;
font-size: 0.8rem;
font-weight: bold;
&:nth-child(1), &:nth-child(2), &:nth-child(3) {
border-top: 1px solid #eee;
}
&:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) {
border-right: none;
}
&:nth-child(10), &:nth-child(11), &:nth-child(12) {
border-bottom: none;
}
&:nth-child(10), &:nth-child(12), &:active {
background-color: #d1d4dd;
}
&:nth-child(12):active {
background-color: #fff;
}
}
}
}
}
</style>
메모:페이지 는 remi 레이아웃 을 사용 하고 루트 html 의 font-size 는 45px 입 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.