微信输入框html怎么实现,微信密码输入框功能效果实现（vue）

效果图如下：

html代码：

密码验证

[v-cloak] {

display: none;

}

X

请输入支付密码验证

密码错误，还可输入4次

忘记密码？

css代码：

* {

margin: 0;

padding: 0;

}

.mypopup {

position: fixed;

top: 0;

left: 0;

z-index: 1000;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.7);

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

}

.mypopup .content {

position: relative;

background: #fff;

width: 75%;

border-radius: 10px;

}

.mypopup .content .main {

padding: 40px 30px;

font-size: 12px;

text-align: center;

}

.mypopup .content .main h3 {

font-size: 18px;

line-height: 2em;

font-weight: 700;

}

.mypopup .content .main .tip {

color: #EE4A4A;

margin-bottom: 10px;

}

.mypopup .content .main .pwipt {

font-size: 0;

height: 45px;

line-height: 45px;

width: 220px;

border: 1px solid #ccc;

}

.mypopup .content .main .pwipt div {

display: inline-block;

width: 16.2%;

height: 45px;

position: relative;

}

.mypopup .content .main .pwipt .border-right {

border-right: 1px solid #ccc;

}

.mypopup .content .main .pwipt div>span {

position: absolute;

width: 10px;

height: 10px;

background: #000;

border-radius: 50%;

left: 50%;

top: 50%;

margin-top: -5px;

margin-left: -5px;

}

.mypopup .content .main .pwipt input {

outline: none;

border: 0;

background: none;

width: 900px;

height: 0;

padding: 22px 0;

text-align: center;

position: absolute;

left: -500px;

right: 0;

z-index: 1000;

color:transparent;

text-indent: -999em;

}

.mypopup .content .close_btn {

position: absolute;

top: 14px;

right: 14px;

width: 14px;

height: 14px;

z-index: 1000;

}

.forgetpw {

font-size: 14px;

color: #008AFF;

margin-top: 10px;

text-align: right;

}

js代码：

var vm = new Vue({

el: '#app',

data: {

password: '',

autofocus: true,

show1: false,

show2: false,

show3: false,

show4: false,

show5: false,

show6: false,

},

mounted: function () {

},

methods: {

//关闭密码输入清空输入

closePop: function() {

this.password = '';

this.judgePassword();

},

//校验密码

surePassword: function() {

// 调用密码校验接口

},

// 密码输入样式

judgePassword: function() {

if(this.password.length == 0) {

this.show1 = false;this.show2 = false;this.show3 = false;this.show4 = false;this.show5 = false;this.show6 = false;

}

if(this.password.length == 1) {

this.show1 = true;this.show2 = false;this.show3 = false;this.show4 = false;this.show5 = false;this.show6 = false;

}

if(this.password.length == 2) {

this.show1 = true;this.show2 = true;this.show3 = false;this.show4 = false;this.show5 = false;this.show6 = false;

}

if(this.password.length == 3) {

this.show1 = true;this.show2 = true;this.show3 = true;this.show4 = false;this.show5 = false;this.show6 = false;

}

if(this.password.length == 4) {

this.show1 = true;this.show2 = true;this.show3 = true;this.show4 = true;this.show5 = false;this.show6 = false;

}

if(this.password.length == 5) {

this.show1 = true;this.show2 = true;this.show3 = true;this.show4 = true;this.show5 = true;this.show6 = false;

}

if(this.password.length == 6) {

this.show1 = true;this.show2 = true;this.show3 = true;this.show4 = true;this.show5 = true;this.show6 = true;

// 接口校验密码

this.surePassword();

}

},

}

});